Önce bunun için gerekli php kodlarından bahsedelim.

<form action="action.php" method="post">
İsminiz: <input type="text" name="isim" />
Yaşınız: <input type="text" name="yaş" />

<input type="submit" /></form>

Yukarıdaki basit formda isim ve yaş girdisi isteniyor. Bu girdiler yukarıdaki “name” parametresiyle alınır. Bu bilgiler post yöntemiyle alındığından global değişken olan $_POST[''] a değer olarak atanır. Bu atama sonucunda bu bilgileri istediğimiz gibi kullanırız. Örneğin $_POST['isim'] un değeri artık, girilen ismin içeriğidir. Böyle bir forma seçeneğe göre e-mail adresi girebiliriz. Bunu için aşağıdaki html tagları kullanılabilir.

<select name="agents" id="agents">
 <option value="1">Pazarlama Satış</option>
 <option value="2">Satın Alma</option>
 <option value="3">Müşteri İlişkileri</option>
 <option value="4">İnsan Kaynakları</option>
</select>

Burada gördüğünüz value değerleri bizim için önemlidir. En üstte nasıl name=”isim” parametresinden yararlandıysak, burada da value=”1″ gibi bir parametreden yararlanacağız. Buradan 1-2-3 ya da 4 değerlerinden birisi gelebilir. Yapmamız gereken bu 4 rakama göre email ataması yapmak. Bunun için php deki dizilerden yararlanacağız.

$agents = array(1 => "departman1mail@hotmail.com", 2 => "departman2mail@hotmail.com",3 => "departman3mail@hotmail.com",4 => "departman4mail@hotmail.com");
$agent = $agents[(int) $_POST['agents']];

Burada gördüğünüz gibi $agents dizi değişkenine 4 tane değer atadık. Hemen arkasından $agent değişkenine , $agents[(int) $_POST['agents']] sayesinde formdan gelen değere göre email ataması yaptık. Yani formdan departman1 seçeneği seçilirse, bize 1 değerini gönderir. Biz bu bir değerini şu şekilde alırız $_POST['agents'].Artık demek oluyor. Peki bu değeri yukarıdaki $agents dizisinde nasıl kullanırız. Gördüğünüzü gibi dizideki $agents[1] in değeri departman1mail@hotmail.com. O zaman şöyle bir kod parçası işimizi görür.

$agents[(int) $_POST['agents']] burada yapılan şudur. $_POST['agents'] , formda seçilen seçeneğe göre bir değer alır. Örneğin $_POST[1] yada $_POST[2] . Bunu integer bir rakama dönüştürürsek , $_POST['agents'] kodu bir rakam halini alır. Böylece $agents[(int) $_POST['agents']] kodu $agents[1] değeri olur ki buda $agents dizi değişkenindeki 1 e atanan email değerini alır yani departman1@hotmail.com.

Bu değeri email gönderirken kulladığımız mail() fonksiyonuna verebiliriz. Böylece hangi seçenek seçilirse o değişkenin değerindeki emaile gönderilmiş olur.

Biraz php bildiğinizi varsayarak anlattım. Umarım karışık olmamıştır.

Bu bilgilerden sonra bu yönde geliştirdiğim mail formunu sizinle paylaşmak istiyorum.

Burada bulabileceğiniz, ajax ile geliştirilmiş bir form bulunuyor. Gayet kullanışlı ve hoş görünümlüdür. Bu formu türkçeleştirip, yukarıda anlattığım yöntemi içerisine ekledim. Aşağıdaki gibi bir sonuç aldım.

[İNDİR][DEMO]

KULLANIM

Yapmanız gereken, indirdiğiniz dosyayı zipten çıkardıktan sonra, içerisindeki index.php dosyasını bir metin editörü ile açıp, 55. satırdaki aşağıdaki kodlardaki mailleri düzenlemeniz. Eğer 4 den fazla yada az sayıda email girecekseniz orayı isteğinize göre düzenleyin. ($agents = array(1 => “departman1mail@hotmail.com”, 2 => “departman2mail@hotmail.com”,3 => “departman3mail@hotmail.com”,4 => “departman4mail@hotmail.com”);)

Daha sonra 138. satırdaki aşağıdaki kodları isteğinize göre biçimlendirin.

<select name="agents" id="agents">
 <option value="1">Pazarlama Satış</option>
 <option value="2">Satın Alma</option>
 <option value="3">Müşteri İlişkileri</option>
 <option value="4">İnsan Kaynakları</option>
</select>

Tavsiyem, formu indirip hostunuza yükledikten sonra , iframe kodlarıyla iletişim sayfanıza çağırmanız. Çünkü içerisinde css ve js dosyalarının çalışması gerekiyor. O yüzden bu dosyaları çağırmakta zorlanabilirsiniz. Dediğim yöntemle istediğiniz yere ekleyebilirsiniz. Bir avantajıda mail gönderme başarılı olduğunda aynı sayfada bunu gösterir.İframe için aşağıdaki kodları kullanabilirsiniz.

<iframe src=”formun tam yolu” scrolling=”no” width=”700″ height=”570″>
</iframe>

Extra bir bilgi. Eğer iframeyi eklediğinizde kenarlarda border çıkıyorsa. Css dosyanıza aşağıdaki kodu eklemeniz yeterli olacaktır.

iframe{border:none}

Kolay gelsin.

Css’de  “a” html etiketine stil tanımlaması , active, link, visited olarak yapılabiliyor.

a:active {color:#000;} bu kod; mouse ile linke tıkladığımız andaki linkin rengidir. Yani parmağımızı mouse tuşundan kaldırdığımızda active çalışmayacaktır.

a:link{color:#fff;} bu kod ile de, sitede linklerin genel rengi belirtilebilir.

a:visited{color:#ee22aa;} ile , ziyaret edilmiş linklerin rengini belirleyebiliriz.

Oysa bizim istediğimiz o anki aktif linkin , diğer bir linke girene kadar , stilinin diğerlerinden farklı olması.

Bunun için en uygun yöntem javascript kullanmak. Nette biraz araştınca , php ile hazırlanmış çözümler , javascript ile hazırlanmış çözümler ile karşılaştım.Ama türkçe bir siteye rastlayamadım. Aramada kelimeleri yanlış seçtiğimden olabilir.  Bazılarının linkleri şu şekilde;

http://vijaymurukesan.wordpress.com/how-to-display-active-menu-using-javascript/

http://www.sitepoint.com/dynamic-menu-javascript/

http://www.webmasterworld.com/forum91/5004.htm

http://www.paulbellows.com/getsmart/set_active/

Ben burada highlight scriptiyle hazırlanmış yönetimi anlatacağım. Çünkü bir çok yöntemde, bir menüye odaklanılmış ve diğer menülere uyarlamak için div değiştirmek gerekiyor.

Önce çalışma mantığından bahsedeyim. Link aktif olduğu anda ,sadece menudeki aktif olan <li> ve <a> etiketlerine  class tanımlaması yapılıyor. <li class=”current”><a class=”current”>  şeklinde. Bu class tanımlaması sayeside Css den aktif olan linke stil tanımlaması yapabiliyoruz.

Şimdi gelelim kodlama kısmına:

Scriptimiz , belirtilen bir katman aralığındaki <li> ve <a> etiketlerine class tanımlaması yapıyor. Yani <div id=”icerik”> katmanını ele alırsak, o katman içerisindeki etiketlere class tanımlaması yapılıyor.

highlight.js dosyasını indirelim.  notepad++ ile açalım. Burada yapmamız gereken, yukarıda söylediğim katman meselesini buraya tanımlayacağız. Yani sadece bir menude kullanmak istiyorsanız, o menünün bir üstündeki div katmanının id sini , dosyamızdaki “nav” tanımlamaları yerine yazıyoruz. sitemizdeki katman <div id=”menu”> şeklindeyse , dosyamızda nav yazan yerlere menu yazıyoruz.

Daha sonra dosyamızı kaydedip, kullanmak için sitemizin <head> tagları arasına ,<script language=”javascript” src=”highlight.js”></script> kodunu ekliyoruz. Tabi src yazan yere dosyamızın yolunu belirtiyoruz.

Şimdi yapmamız gereken diğer bir şey, katmanımızın kapandığı </div> tagından önce aşağıdaki kodu eklemek.

<script language=”javascript”>setPage()</script>

Bu kodu ekledikten sonra , katmanımız arasındaki aktif olan <li> <a> taglarına class=”current” tanımlaması yapılacaktır. Şimdi bu class tanımlamasını kullanıp artık stil verebiliriz.

css dosyamızın içerisine, katmanımızın ismine göre aşağıdaki kodları yazabiliriz. Örnek olarak menu katmanını ele alalım.

#menu li.current {
background-color: #E6E6E6;

}

#menu a.current {
background-color: #E6E6E6;

}

Bu iki css tanımlaması ile , li ve a etiketlerine stil vermiş olduk. Bu stili isteğinize göre şekillendirebilirsiz. Biraz css bilgisi gerekli.

Çalışan örneğini daha önce indirmiştim. Buradan sizde indirebilirsiniz.

Sitenizi yeniden yedeklerden kurarken yada eklentiyi kurduğunuzda bu istatistikler görünmeyebilir. Bunun nedeni sql tablosunu oluşturamamasıdır. Eğer rakamların gösterilmediği bir hata alıyorsanız aşağıda vereceğim sql kodlarını, cpanelinizden ->> phpmyadmin bölümünden veritabanınıza yazdırmanız gerekiyor. Kodlar ;

CREATE TABLE IF NOT EXISTS `wp_onlinecounter` (
`timestamp` int(15) NOT NULL default ‘0′,
`ip` varchar(15) NOT NULL default ”,
`count` int(15) NOT NULL default ‘0′,
`maxon` int(6) NOT NULL default ‘0′,
`maxontime` int(15) NOT NULL default ‘0′,
`uri` text NOT NULL default ”,
PRIMARY KEY (timestamp, ip)
);

bu kod ile tablo oluşacaktır ve eklentinin ayarlarından gösterdiğiniz rakamlar gösterilecektir.

PHP de sistem tarihini göstermek için date() fonksiyonu kullanılır. Bu fonksiyon tanımlandığı sistemin tarihini baz alarak bir çıktı verir. Yani sitelerimizin server larındaki tarih formatı nasılsa bize öyle bir çıktı verir. O yüzden genelde ingilice çıktı alırız.

Date() fonksiyonunun içinde kullanabileceğimiz değişik parametreler vardır.
Örneğin;
date(“m.d.y”); // 03.10.01 formatında çıktı verecektir.
Buna benzer uygulamaları aşağıda görebilirsiniz.

<?php
// Sistem tarihimiz : March 10th, 2001, 5:16:18 pm olsun. Parametrelere göre çıktılar aşağıdaki gibi olacaktır.
date(“F j, Y, g:i a”); // March 10, 2001, 5:16 pm
date(“m.d.y”); // 03.10.01
date(“j, n, Y”); // 10, 3, 2001
date(“Ymd”); // 20010310
date(‘h-i-s, j-m-y, it is w Day z ‘); // 05-16-17, 10-03-01, 1631 1618 6 Fripm01
date(‘\i\t \i\s \t\h\e jS \d\a\y.’); // It is the 10th day.
date(“D M j G:i:s T Y”); // Sat Mar 10 15:16:08 MST 2001
date(‘H:m:s \m \i\s\ \m\o\n\t\h’); // 17:03:17 m is month
date(“H:i:s”); // 17:16:17
?>
Kod kaynak php.net

Peki bu çıktıları türkçe yapmak için ne yapmalıyız?
Bunun için aşağıdaki kod parçasını kullanabilirsiniz. Bu kod parçası, date() fonksiyonundaki ay ve günleri türkçe karşılıkları ile değiştirmektedir.

<?php
function tarih($zaman) {
$gunler = array(
"Pazar",
"Pazartesi",
"Sal&#305;",
"&#231;arsamba",
"Per&#351;embe",
"Cuma",
"Cumartesi"
);
$aylar =array(
NULL,
"Ocak",
"&#351;ubat",
"Mart",
"Nisan",
"May&#305;s",
"Haziran",
"Temmuz",
"A&#287;ustos",
"Eylül",
"Ekim",
"Kas&#305;m",
"Aral&#305;k"
);
$tarih = date("d",$zaman)." ".$aylar[date("n",$zaman)]."
".date("Y",$zaman)." ".$gunler[date("w",$zaman)];
return $tarih;
}

$zaman = time();
$tarih = tarih($zaman);
echo "$tarih";
?> 

Bu kod parçasını göstermek istediğiniz yere tanımlayabilirsiniz. Ama bu şekilde çok yer kaplayacaktır. Ve başka yerde göstermek istediğinizde yine bu kod parçasını yapıştırmak zorunda kalacaksınız. Bunun yerine kodun sonundaki yeşil ile gösterdiğim echo “$tarih”; kodunu silip, tarihi göstermek istediğimiz yere aşağıdaki kodu eklememiz yeterli olacaktır;

<?php echo "$tarih"; ?>

Bu söylediklerimi wp ye uygulamak için;
Öncelikle türkçe tarih çıktısı verecek yukarıdaki uzun kod parçasını echo “$tarih”; kodu silinmiş bir şekilde functions.php içine atalım. Daha sonra tarihi göstermek istediğimiz yere aşağıdaki kodu yapıştıralım;

<?php echo "$tarih"; ?>

2. yöntem olarak bu linkteki kodları indiriyoruz.
Daha sonra tarihi göstermek istediğimiz yere aşağıdaki kodu veriyoruz;

<?php include   "tarih.php"; ?>

Eğer wp kullanıyorsan linkteki dosyayı temanın anaklasörüne atıyoruz. Daha sonra aşağıdaki kodu göstermek istediğimiz yere yapıştırıyoruz.

<?php include(TEMPLATEPATH . "/tarih.php"); ?>

Hepsi bu kadar. Umarım anlatabilmişimdir.

Evet daha önceki yazımda form etiketleriyle ilgili bilgi vermiştim. Şimdide form oluşturabileceğimiz siteler hakkında bilgi vermek istiyorum. Formlarımızı çevirim içi oluşturup yapacağımız sitelerde kolaylıkla kullanabiliriz. Bu hizmeti veren bir kaç site biliyorum. Benim hoşuma giden 2 tanesini burda tanıtacağım. Ama onun öncesinde size , rehper niteliğinde olan form bulabileceğiniz siteleri vermek istiyorum.

Form Bulabileceğiniz Siteler

1. 40 tane js ve css le hazırlanmış form bulabileceğiniz bir liste , tıklayın.
2. 16 tane ajax kodlamayla süslenmiş iletişim formu, tıklayın.
3. Burada bakıp ilham alabileceğiniz form örneleri verilmiş, tıklayın.
   
4. Burada da bildirgeçte hazırlanmış, form örnekleri veren siteler var, tıklayın.

Evet şimdi çevirimiçi form oluşturabileceğiniz sitelere değinelim.

İlk sitemiz  jotform.  Sitenin arayüzü ve form oluşturma paneli çok hoşuma gitti. Tavsiyem siteye girdikten sonra siteye üye olmanız. Çünkü üye olduğunuz zaman , hazırladığınız formları sonradan dönüp bulabilme şansınız olur. Şimdi sitenin özelliklerine ve nasıl form oluşturacağımıza değinelim.

Siteye girdiğinizde ilk olarak böyle bir panel karşınıza çıkacaktır. Buradan new diyerek , yeni bir form oluşturmak için bir sihirbaz açabilirsiniz. Bu sihirbazda ilk olarak karşımıza gelen , ne çeşit bir form oluşturacağımız ile ilgili şablonlardır. Bu şablondan ihtiyacımıza göre bir form seçebiliriz. Sağdaki resme tıklayıp büyük halini görebilirsiniz. Burada seçebileceğiniz bir çok seçenek mevcut. Bir iş başvuru formu , iletişim formu yada boş bir form seçip daha sonra panelden gerekli eklemeleri yapabiliriz.  Formu seçip next dediğimizde, karşımıza formumuzla ilgili tema ayarları çıkacaktır. Bu ayarlarda benim en çok hoşuma giden babyblue teması oldu. Temayıda seçtikten sonra finish diyoruz ve karşımıza güzel bir form açılıyor.

Yukarıda verdiğim ilk resimdeki panelden Properties butonuna tıkladığınızda sağ altta formun genelini ilgilendiren ayarlar çıkacaktır. Buradan formla ilgili ayalları yapabiliriz.

Örneğin tema ayarları, formumuzun başlığı, renk ayarları, spam kontrolu,teşekkür için gelecek olan resim url si…

-

-

-

-

Şimdi artık formumuza yeni elemanlar ekleyebiliriz.  Sitenin panelinde sağda göreceğiniz gibi tollbox denen eleman araçları vardır. Buradan istediğimiz bir form etiketini yerleştirebiliriz.

Örneğin text linki size yani bir input type=”text” ekleyecektir. Yani ismimizi yazdığımız küçük text kutucuğu. Önceki yazıma bakarsanız etiketlerin ne işe yaradığını daha iyi anlayabilirsiniz.

Herbir etiket ekledikten sonra oradaki ayarları düzenlemeniz gerekiyor. Bunun için eklediğimiz etiketin bölgesine 1 kez tıklarsak yanda properties bölümünde , etiketimizin ayarları çıkacaktır. Bu ayarlardan etiketimize isim verebiliriz yada etiketimizle ilgili genel ayarları yapabiliriz.

Bu ayarlarda dikakt etmeniz gereken bir şey, Required seçeneğidir. Bu seçenek size yerleştirdiğiniz etiketin girilmesinin zorunlu olup olmadığını ayarlar. Örneğin bir text kutucuğu eklediniz. İsminede “İsminiz” dediniz. Eğer Required seçeneğini yes yaparsanız , o zaman oluşturduğunuz formda isim girilmesi mecburi hale gelir. Yine bu ayarlardan eklediğiniz etiketin, boyutunu , açıklamalarını ve Validation özelliğini ayarlayabilirsiniz. Validation onaylamak demek. Bu seçenekte size, numeril, email ve alphabe gibi seçenekler sunacaktır. Eğer siz oluşturduğunuz etikete bir email girilmesini istiyorsanız, buradaki ayarı email yapmalısınız. Çünkü formu dolduran kullanıcı email dışında birşey girdiğinde form hata vermelidir.

Bu site gerçekten herşeyi düşünmüş ve mükemmel bir form oluşturmamız için her türlü aracı bize sunmuş. Yine yandaki panelde görebileceğiniz bu araç paneli bize birçok seçenek sunuyor. Bunlardan 1. si spam maillere karışı yapılan güvenlik amaçlı, onay kodları. Bu kodları birçok formda görebiliriz, resimli bir şekilde bize sunulan karakterleri girmemiz istenir. İşte bizde bunu formumuza captcha seçeneğini seçerek bu özelliği ekleyebiliriz. Diğer seçenekler adlarındanda anlaşılacağı gibi, resim ekleme, tarih kutucuğu yerleştirme, açılır menü koyma, html kodları yerleştirebilme, şifre istediğimiz bir kutucuk açabilme seçeneklerini içeriyor.

Son olarak bu hazırladığımız formu nasıl kaydedeceğimize bir bakalım. Öncelikle ilk resimdeki panelde save diyoruz ve formumuzu hafızaya aldırıyoruz.
Daha sonra source butonuna basarsanız , karşınıza yandaki gibi bir menü gelecektir. Burdan insan iconlarına basarsanız, kaydettiğiniz formu arkadaşlarınıza gönderme şansınız olur. Zip şeklindeki sıkıştırma iconuna tıklarsanız, hazırladığınız formu zip dosyası şeklinde indirme şansınız olarcaktır. Yine bu sayfadan kaynak kodları görebilirsiniz ve sitenize direk bu kodları uyarlayabilirsiniz.

2. olarak göstereceğin site , phpform. Bu sitede de kafanıza göre form oluşturabilir bu oluşturduğunuz formu indirip sitenize uyarlayabilirsiniz.

Siteye ilk girdiğinizde sizi temalarla süslü bir sayfa karşılıyor. Bu sayfadan gözünüze hoş gelen bir tema seçip formunuzu oluşturmaya başlamak için next diyoruz. Yine karşımıza bir panel ve oluşturduğumuz formu gösten bir sayfa açılacaktır. Fazla detaya inmek istemiyorum. Çünkü hem yazı çok uzadı hemde panel işleyişi jotform la aynı gibi. Tek yapmanız gerek yine panelden etiketleri atmak , onları editlemek daha sonra sayfanın altındaki save butonuna basıp hazırladığınız formu indirmek….

Evet bu yazıyıda burada sonlandıralım. Umarım azda olsa birşeyler anlatabilmişimdir..

Öncelikle bir web sitesi hazırlanırken sitede kullanılacak dile göre karakter kümesi kodlanır. Bu kodlama web sitemizde kullanılacak karakterlerin tanınmasını sağlar. Eğer biraz  HTML bilgisine sahipseniz META taglarını duymuşsunuzdur. İşte bu karakter kümesi meta tagları içinde tanımlanır. Aşağıdaki kod satırından herhangibirisi türkçe karakterli siteler için kullanılabilir.

<META http-equiv=content-type content=text/html;charset=iso-8859-9>
<META http-equiv=content-type content=text/html;charset=windows-1254>

Bir örnek gösterelim;

<html>
<head>
<title>Karakter Kodlaması Örneği</title> Title tarayıcımızın en üstünde mavi yerde çıkacak sayfa başlığıdır

<META http-equiv=content-type content=text/html;charset=iso-8859-9>

</head>
<body>
Burası sayfamızın görüntülendiği gövde kısmıdır.
</body>
</html>
Bu şekilde sayfamızın türkçe karakterlere uygun olmasını sağlamış olduk.

Şimdi biraz UTF-8 den bahsedelim.
UTF-8 : 8 bitlik bir Unicode karakter seti formatıdır. “Unicode Transformation Format”‘ın kısaltması olarak kullanılır. UTF kullanarak 1 milyondan fazla karakter kodlanılabilinmektedir.
Yani anlıcağımız yukarıdaki META etiketleri arasına tanımladığımız türkçe karakter kümeleri ( iso-8859-9 ,windows-1254 ) yerine evrensel bir karakter kümesi tanımlayabiliriz “UTF-8 “. O zaman meta tagları içindeki kodumuz değişecektir ve şöyle olacaktır;

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

Bu şekilde sayfamızı kodladığımızda sayfamızdaki türkçe karakterler tarayıcılar tarafından düzgün yorumlanacaktır.

Bu kodlamaya karşı yinede , türkçe karakter sorunları yaşayabiliriz. Bu bazen sunucudan,  bazen kullandığımız web sisteminin kodlanmasından veya sayfayı editlerken kullandığımız editörden kaynaklı olabilir.  Böyle bir durumda türkçe karakterler,  “?” veya absürt karakterler ile değiştirilir (yani yorumlanamaz). Bunun için yapmamız gereken türkçe karakterler yerine html deki karşılıkları yada ascii kodlamadaki karşılığını yazmak.

Türkçe Karakterler İçin HTML karşılığı;

Ü <=> Ãœ
Ş <=> ÅŸ
Ğ <=> ÄŸ
Ç <=> Ç
İ  <=> Ä°
Ö <=> Ö
ü <=> ü
ş <=> ÅŸ
ğ <=> ÄŸ
ç <=> ç
ı  <=> ı
ö <=> ö

Türkçe Karakterler İçin ASCII karşılığı;

ç      &#231;
ı      &#305;
ğ     &#287;
ö     &#246;
ş     &#351;
ü     &#252;
Ç    &#199;
İ     &#304;
Ğ    &#208;
Ö    &#214;
Ş    &#350;
Ü   &#220;

Sayfamızdaki absürt karakterlerleri  bu şekilde kodlarsak sorun ortadan kalkacaktır. Ama eğerki 10 tane sayfamız varsa ve hepsinde aynı sorunu bu şekilde halletmek istiyorsak o zaman iş baya bir zahmetli hale gelir. Sayfalardaki tüm karakterleri tek tek değiştirmek baya bir zamanımızı ve sabrımızı alacaktır. Ama bununda pratik bir yolu var.

. Bunun için notepad++ gibi bir editörde CTRL+H kısa yolunu kullanıp , üstteki resimdeki yolu takip ederek istediğimiz karakterin karşılığını tüm sayfalarda değiştirebiliriz.

Bir başka söylenecek şeyse, wordpress kullanıyorsanız ve türkçeleştirme işlemini notpad++ gibi bir editörde yapıyorsanız türkçe karakter sorunu yaşayabilirsiniz. WordPress te türkçeleştirme işlemlerinizi Tasarım–>>Tema Editörü bölümünden yaparsanız bu sorunlarla karşılaşmazsınız.
Ama türkçeleştirme yapacağınız dosya tema editöründe yoksa , o zaman bu işlemi notepad++ gibi bir editörde yapmak kaçınılmaz olur.  O zaman yapmamız gereken editörümüzdeki Düzenle–>>UTF-8 (bom olmadan) kodla seçeneğini seçmektir. Böylece editlediğimiz sayfa utf-8 kod dizisine göre kodlanacaktır.

Aynı menüde UTF-8 de kodla seçeneğide vardır. Burayı işaretlesekte aynı sonuca ulaşırız. Ama ne yazıkki bu seçenekte bazı sorunlara neden olmaktadır.
UTF-8 de kodla seçeneğini seçtiğimizde editörümüz ,bizim göremiceğimiz bir şekilde sayfanın başına   gibi bir kod ekler. Bu kod , sayfanın UTF-8 olduğunu vurgular ( Yani BOM denilen şey) ve tarayıcılarda hatalara neden olur. O yüzden bu kodu kaldırmak için BOM olmadan kodla seçeneğini seçmemiz en sağlıklı sonucu verecektir.

Umarım anlatmak istediklerimi anlatabilmişimdir. Herkese kolay gelsin…

Form Etiketleri

Formlar set halindedir. Yani bir bilgisayar kasasının içindeki elemanlar gibi. Eğer elemanı kasanın içene yerleştirmezseniz çalışmaz. Aynen bunun gibi form etiketlerini işeren bir kasa vardır. Tüm form etiketlerini;
<form></form>
yapısı içine yerleştiririz. Böylece hepsi birbiriyle ilişkili olacaktır.

Biraz bilgi vermeye devam edelim. Formu gönderdiğinizde formdaki herbir bilgi tanımlanmış bir değişkene yazdırılır. Yani isminizi yazdığınızda , isminiz gidecek dosyada bir değişkene yazdırılır. Daha sonra ordan istenilen yere yollanır yada çıktı verilir. Bilgilerin doğru değişkene gitmesi için name=”" parametresi kullanılır. Her etikette olmak zorundadır.
Bir form oluşturulurken, bilgilerin gideceği dosya ve gönderilme metodu belirtilmelidir.

action=”Dosya ismi” Burada formdan gidecek bilgilerin değerlendirildiği dosya adının uzantısı yazılır.
method=”get/post” Buradada form gönderilme metodu belirlenir. Get yada Post kullanırsınız. Güvenlik açısından en çok post kullanılır.
Bu iki yöntemin çeşitli farklılıkları vardır. Fakat en belirgin ve temel farkları ise GET metoduyla gönderilen veriler ilgili betik sayfasında tarayıcının adres çubuğunda belirtilirken POST yöntemiyle gönderilen veriler belirtilmezler. POST yöntemi bu özelliğiyle daha gizli bir yöntemdir ve şifre verilerini göndermede kullanılan yöntemdir diyebiliriz. Ayrıca eğer çok uzun bir metni gönderiyorsak tarayıcının adres çubuğunda gereksiz yer kaplaması hem hız hem de görünüm bakımından hoş değildir.  Bu yüzden POST kullanmanızı tavsiye ederim.
Örnek olarak;

<form action=”http://ercani.com/kullanicimesaj” method=”post”>

Şimdi genel bir etiketi tanıtalım. Daha sonra bu etiketin içine yerleştireceğimiz yardımcı kodları inceleyelim.

<input>
Bu etiket genel amaçlı kullanılan bir form etiketidir. Yani isminizi gireceğiniz boş kutu, işaretlediğiniz küçük kutucuklar, yorumunuzu yazdığınız textarea hep bu etiket içinde belirlenir. Ve bu etiket </input> gibi bir kapanışla kapanmaz.
Örneğin;
<input type=”text” name=”isim”> Burada gireceğiniz isim kutucuğunu belirledim. <input type=”submit” value=”gönder”> buradada gönder butonunu koydum.

Şimdi <input> etiketinin yardımcı kodlarını inceleyelim;

type = “eleman türü” Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığını aşağıda anlatacağım.

name = “isim” Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.

value = “değer” “radio” ve “checkbox” dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek “değer” eleman türüne göre değişir.

size = “değer“      “text” ve “password” elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.

maxlength = “değer” “text” ve “password” elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır.

checked = “değer” Sadece “radio” ve “checkbox” elemanlarında seçili elemanı “on” olarak belirtmek için kullanılır. Diğerlerinde yoksayılır.

src = “dosya ismi” “image” elemanında resim dosyasını belirtmek için kullanılır.

alt = “metin” Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır.

align = “left|center|right” Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır.

readonly Veri girme amacıyla kullanılmayacak elemanlar içindir.

disabled Veri girişi engellenecek elemanlar içindir.

Bu yardımcı kodlar bize formumuzun tipini ve özelliklerini belirlememizde yardımcı olacaklardır. Şimdi örneklerimize geçelim.

Text ;
Adı: <input type=”text” name=”firstname”><br>
Soyadı: <input type=”text” name=”lastname”>

Burdaki örnekte ad ve soyad girilmesini istedik ve bu girilecek değerlerin $firstname, $lastname değişkenlerine gideceğini belirledik.
Password;
Formumuza parola yazılabilecek alan eklemek için kullanılır. “text” elemanından farklı olarak bu alana girilen her karakter * ile gösterilir.Kullanıcı:
<input type=”text” name=”username”><br>
Parola: <input type=”password” name=”password”>

checkbox
Formumuza onay kutuları eklemek için kullanılır.

<input type=”checkbox” name=”kutu1″ checked=”on”> HTML<br>
<input type=”checkbox” name=”kutu2″> PHP<br>
<input type=”checkbox” name=”kutu3″> MySQL

Buradada seçeceğimiz kutucukları belirledik. checked=”on” diyerek o kutucuğun seçili kalmasını sağladık.
Textarea
Bu kod ile formumuza bir alan açarız. Bu alana örneğin yorum veya açıklama yazılabilir. Yardımcı öğeler olarak rows ve cols kullanılır.
rows satır genişliğini, cols sa sütun yüksekliğini belirler.

Yorumunuzu Belirtin:
<textarea name=”yorum”
rows=”10″ cols=”60″>
</textarea>

radio
Radio düğmeleri bir tek seçenek belirtmek için kullanılır. Örneğin cinsiyet. (gerçi günümüzde cinset artık baya bir çeşitlendi ama)

<input type=”radio” name=”cinsiyet” value=”erkek” checked=”on”> Erkek<br>
<input type=”radio” name=”cinsiyet” value=”disi”> Dişi<br>

submit, reset
Bu iki kod bize formu gönderme ve temizleme işini görür. Submit ile formu göndereceğimiz butonu oluştururuz, reset ile ise formu temizlemesini sağlarız.
Şimdi genel bir form oluşturalım hepsini bir arada görelim;

<form action=”http://herhangibirsite.dom/prog/adduser” method=”post”>
<p>
Adınız: <input type=”text” name=”firstname”><br>
Soyadınız: <input type=”text” name=”lastname”><br>
Eposta adresiniz: <input type=”text” name=”email”><br>
<input type=”radio” name=”cinsiyet” value=”erkek” checked=”on”> Erkek<br>
<input type=”radio” name=”cinsiyet” value=”disi”> Dişi<br>
<input type=”submit” value=”Formu Yolla”> <input type=”reset” value=”Formu Temizle”>
</P>
</form>

Bu örnek genel bir form yapısıdır. <form></form> yapısının içinde tanımlanan setler dir.
Eğer butonlara resim eklemek isterseniz, <button></button > etiketlerinin içine <img> etiketini kullanarak bunu yapabilirsiniz.
<button> etiketi aynı <input> etiketine benzer. Yine içinde type ve name parametrelerini alır ve aynı işlevi görür. Yanlız kapatma derdi vardır. O yüzden sadece butonlara resim ekleyeceğiniz zaman kullanabilirsiniz.

<button name=”submit” type=”submit” value=”submit”>
<img width=”20″ height=”21″ src=”../images/logo.gif”/>Gönder
</button>
<button name=”reset” type=”reset” value=”reset”>
<img width=”20″ height=”21″ src=”../images/logo.gif”/>Sıfırla
</button>

Şimdi diğer elemanlara geçelim. Formlarda görmüşsünüzdür şehriniz sorulurken aşağıya doğru açılan bir menü konulmuştur. Veya açılmış bir vaziyette size bir kaç seçenek seçmenizi isteyen bir menü vardır. İşte bunları nasıl oluşturacağımıza bakalım;
<select> </select>, <option> </option>
<select></select> yapısı oluşturulacak menünün ana etiketidir. Yani menümüzü bu etiket içinde oluştururuz.
<option> </option> yapısıda menünün içindeki elemanları belirtir. Örnekle daha iyi anlarız;

<select name=”sistemadi”>
<option value=”win”>Windows 9x</option>
<option value=”winnt”>Windows NT</option>
<option value=”linux”>Linux</option>
<option value=”unix”>UNIX</option>
<option value=”os2″>OS/2</option>
<option value=”macos”>MacOS</option>
</select>

Sanırım anladınız. Select etiketinin içine option etiketini koyarak bu açılır menüyü oluşturduk.

Şimdi son olarak vermek istediğim formumuzu gruplara ayırarak daha hoş görünmesini sağlayan bir etiket;
<fieldset> </fieldset>, <legend> </legend>
<fieldset></fieldset> etiketinin içine <legent></legent> etiketini yerleştirerek formumuzu gruplayabiliriz. Örneğin;

<form action=”c:\\form.txt” method=”post”>
<fieldset>
<legend>Kişisel Bilgiler</legend><br/>
Adı: <input name=”personal_fname” type=”text” size=”20″ tabindex=”1″/>
Soyadı: <input name=”personal_lname” type=”text” size=”25″ tabindex=”2″/><br/><br/>
Adresi: <input name=”personal_address” type=”text” size=”55″ tabindex=”3″/><br/><br/>
<form action=”c:\\form.txt” method=”post”>
<fieldset>
<legend>Bildiği diller</legend><br/>
<input name=”dil”
type=”checkbox”
value=”html” tabindex=”20″/> Html  
<input name=”dil”
type=”checkbox”
value=”sql” tabindex=”21″/> Sql    
<input name=”dil”
type=”checkbox”
value=”php” tabindex=”22″/> Php<br/>
</fieldset>
</form>

Evet genel yapı bu şekilde. Bu form etiketlerini daha düzenli yapmak için tablo kullanmak ve bunu css le süslemek görsel olarak formunuzu zenginleştirecektir.
Yazı fazla uzadı o yüzden çevirim içi form oluşturma hizmeti veren siteleri diğer bir yazımda vermek istiyorum. Umarım yararı olur.

bu kodun görünümü şu şekildedir.

gördüğünüz gibi resim paragrafın soluna dayandı.Paragraf ise akışına devam etti sanki resim yokmuş gibi.
anlıcağımız float tanımlanan bir eleman normal akıştan çıkar ve konumlandığımız yerde diğerlerine uymaksızın durur.
Peki 3 tane kutumuz olsun ve 3 kutumuzada float uygularsak ne olur? önce float uygulanmamış şekilde 3 kutu oluşturalım
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″/>
<title>float tanımlama</title>
<style>
#birinci {border:dashed thin #ff33ff;
margin: 5px;
width:150px  ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px; }
</style>
</head>
<body>
<div id=”birinci”>1. kutu</div>
<div id=”ikinci”>2. kutu</div>
<div id=”ucuncu”>3. kutu</div>

</body>
</html>
Bu kodun görünümü şu şekildedir.

Ama burada aşağıdaki gibi 3 kutuyada  float eklersek birbirlerine göre konumlanacaklardır.
#birinci {border:dashed thin #ff33ff;
float: left;
margin: 5px;
width:150px  ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
float:left}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px;
float: left; }

Peki sadece 2. kutuya float:right versek ne olur. O zamanda ikinci sağa dayanır ve 1. kutu ile 3. kutu sıralamaya devam eder.

sanırım float hakkında bir fikir oluştu kafamızda. Genel bir tekrar yapacak olursak Float kutuların sağa veya sola olan konumlarını belirler.

tablosuz web tasarımının önemli bir konusu daha CLEAR özelliği.
CLEAR: Clear özelligi ile float uygulanmıs elemandan sonraki elemanlara float etkisini durdurmamız mümkündür.Resim ve metin elemanları diger elemanlara göre floating eleman olarak tanımlanırlar.
aldığı değerler;none | left | right | both tur.
left degeri uygulandıgı elemanı floating elemanın bir alt soluna atar, right özelligi  saga atar, none özelligi elemanın baslangıç degerini geri döndürür ve both degeride iki floating elemanın asagısına atar.

örneğin yukarıdaki örnekte 3 kutuyada float uyguladığımızda ne oluyordu, 3 kutuda birbirinin yanına konumlanıyordu. işte ikinci kutuya biz clear:left uygularsak 2. kutu 1. kutunun altına konumlanacaktır.
#birinci {border:dashed thin #ff33ff;
float: left;
margin: 5px;
width:150px  ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
float:left;
clear:left;}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px;
float: left; }

burda 2. kutunun float etkisi alınmıştır. ve önceki float elemana göre yeri söylenmiştir.

evet css le kutu yönetimi genel olarak bu şekildedir.Son olarak kutuların birbirine göre 3 boyutlu olarak üstte alta kalmasını içeren Z-index özellği vardır. yani bir kutu diğerini kapatacak şekilde üstteyse, altta kalan elemanı üstteki kutunun üstüne çıkarabiliriz.bunuda başka bir yazımda vermek istiyorum

1. <table border=”1″>
2. <tr>
3. <td>burası birinci sutundur.</td>
4. <td>burası ikinci sutundur.</td>
5. <td>burası üçüncü sutundur</td>
6. </tr>
7. </table>

Bu kodları htmlin gövdesi olan <body></body> taglarının arasına yazdığımızda şu sonucu elde ederiz.

Yani anlıcağımız <tr> ler satır oluşturur <td> ler ise sutun. Bu çok karıştırılan bir meseledir. En iyi olarak şöyle bir resimle anlaya biliriz;

Burada <td> yerine en üst sütun olarak yani başlık için <th></th> kullananlarda var.
Toblunun içinde barındırdığı bir diğer özellik <caption></caption> dur. CAPTİON başlık için kullanılır. Örneğin üstteki örnekte birde başlık ekleyelim.

1. <table border=”1″>
2. <caption align=”center”>Burası tablomuzun başlığıdır.</caption>
3. <tr>
4. <td>burası birinci sutundur.</td>
5. <td>burası ikinci sutundur.</td>
6. <td>burası üçüncü sutundur</td>
7. </tr>
8. </table>

Bu kodun görünümü şu şekildedir.

Tabloların genel mantığı budur. Şimdi biraz içerik ekleme ve tablolarda biçimlendirmye göz atalım.
Gördüğünüz gibi tablomuzda çerçeveler(border) var. Kodları incelerseniz <table border=”1″> oduğunu görürsünüz. Yani çerçeve verme işini “border” üstlenir.Eğer değerini 0 verirseniz veya yazmazsanız çerçeveler görünmez.  Borderin değerini arttırabilirsiniz isterseniz 10 yapıp bir deneyin.
Border konusu en iyi css le anlaşılabilir. CSS le border a renk genişlik sitil verebilirsiniz.
Tablolarımızın bir diğer özelliği satırların ve sütünların birleşebilmesidir. Bunun için COLSPAN ve ROWSPAN etiketlerini kullanırız. Colspan sütunları birleştirir.rowspan ise satırları birleştirmede kullanılır. Örneğin;

1. <table border=”1″ width=”75%”>
2. <caption align=”bottom”>Burası alt açıklamadır</caption>
3. <tr>
4. <td>1. sutun</td>
5. <td>2. sutun</td>
6. <td>3. sutun</td>
7. </tr>
8. <tr>
9. <td colspan=”2″>2 satır. 1.sutun burada colspan kullanıldı sütunlar birleşti</td>
10. <td>2. satır 3.sütun</td>
11. </tr>
12. <tr>
13. <td rowspan=”2″>3.satır 1.sütun burada rowspan kullanıldı. satırlar birleşti</td>
14. <td>3. satır 2. sütun</td>
15. <td>3. satır. 3. sütun</td>
16. </tr>
17. <tr>
18. <td colspan=”2″>buradada colspan sütunları birleştirdi</td>
19. </tr>
20. </table>

Bu kodun görünümü şu şekildedir.

Yukarıdaki tabloya bakarsak sanırım satır ve sütun birleştirmeyi öğrenmiş sayılırız.
Bir tablonun genişliği WİDTH yüksekliği ise HEİGHT özelliğiyle verilir. Yukarıdaki örnekte width değerine % cinsinden değer verdik. Bu değer tabloyu tarayıcı penceresine göre %75 olarak ayarla demektir. İstersek widht ve height değerlerine PX(piksel) cinsinden değerlerde verebiliriz.
Bir diğer tabloyu konumlandıran özellik ALİGN özellğidir. Align tabloyu konumlandırmaya yarar. aldığı değerler center, right, left dir.center ortalamak için kullanılır, left sola daya demektir, right sağa daya anlamındadır.
Şimdi bir tabloya içerik ekleyelim ve tablonun zemin renklerini değitirmeyi gösterelim.
Bir tabloya içerik eklemek için <td></td> taglarının arasını kullanırız. Buraya istediğiniz içeriği(multimedia , metin, resim) yerleştirebilirsiniz.Yani daha önce anlatılan <p> paragraf ve metin biçimlendirme özellikleri <td></td> arasında rahatlıkla kullanılabilir. Peki resim eklersek nasıl yapacaz bu işi?
İşte bunun için kullanılan tagımız <img> etiketir. Genel olarak tanımlama şu şekildedir.
<img src=”http://www.ercani.com/ornekresim.jpg” width=”20px” height=”50px”>
SRC : src özelliği resmin nerden çekilmesini belirtir. Tarayıcı ordaki yolu izleyip resmi görüntüler.
width ve height artık bildiğimiz gibi yükseklik ve genişlik değerleridir.
İşte bu şekilde <td><img src=”http://www.ercani.com/ornekresim.jpg” width=”20px” height=”50px”></td> komutunu verirsek tarayıcı o sütun içine belirtilen yoldaki resmi atar. örneğin;

Tablolarda satır ve sütunların zemin rengi bgcolor özelliğiyle verilir. Örneğin;
<td bgcolor=”#00ccff”>burası mavi zeminli bir sütundur</td>

renk değeri olarak daha önce verdiğim ingilizce kelimeleride girebilirsiniz.
tablolarda vereceğim son özellik hücre içi ve dışı boşluk diye adlandırılılan cellspacing ve cellpadding tir.

Bir tablonun hücreleri arasındaki mesafe CELLSPACING olarak verilebilir Hücrelerin içindeki yazı veya grafik gibi unsurların hücrenin iç çizgisine ne kadar yaklaşacağı, ya da başka bir deyişle, hücre içi marj, CELLPADDING ile verilebilir.
aldıkları değerler % ve PX(piksel) cinsinden olabilir.örneğin;
<table border=”1″ cellspacing=5 cellpadding=5 ″> gibi. Bu özelliği değişik denmelerle görebilirsiniz.
Şimdi bir diğer konu olan A etiketi yani anchor değinmek istiyorum. Bu etiket htmlin diğer sayflar arasındaki link denilen geçişi şağlar. Bir resme ve bir metne rahatlıkla link verebilirsiniz. Üzerine tıkladığında şu sayfaya git demektir bu.önce bilmemiz gereken özelliklerini verip sonra örnekle anlayalım.
<a   href=”URL”     target=”değer”>bu metin bir linktir.</a>

HREF=”url”: URL, (Uniform Recourse Locator) Internet’te adres demektir. Bu adres, kendi sabit diskinizde bir klasör (ve alt-klasörler) içindeki bir dosyanın adı olabilir yada http://www.ercani.com  gibi bir HTTP adreside verilebilir. Aynı şekilde internette çevirim içi bir dosyanında bağlantısı verilebilir.Örneğin;
<a href=”http://www.ercani.com/download/bilisim.rar”>buradan dosyayı indirebilirsiniz</a> gibi.
TARGET=”pencere”:  Burada açılacak yeni sayfanın nasıl bir açılma eğilimi göstereceği tanımlanır. Aldığı değerler;

_blank: açılacak sayfa yeni bir pencerede açılır.

_parent: Alınacak unsur, o anda açık sayfayı oluşturmuş bir ana sayfa varsa, onun yerine konulur.

_self: Alınacak sayfa mevcut sayfanın bulunduğu tarayıcı perceresine konulur.

_top: Alınacak sayfa mevcut pencereye en üstten itibaren konulur.
HTML de kullanılan diğer bazı etiketleride değinip yazımı bitirmek istiyorum.,
Kayan yazı oluşturmak:marquee

<marquee>bu yazı kayan bir yazıdır</marquee>
<marquee direction=right>bu yazı sağdan sola kayan bir yazıdır</marquee>
<marquee direction=right bgcolor=#ff33ff scrolldelay=1 witdh=200px >buda kayan bir yazıdır ama zemin rengi vardır</marquee>
Burada kayan yazımıza zemin rengi verdik. scrolldelay kayma hızını belirler sayı arttıkça hız düşer .
PRE tagı <pre>:pre notepad gibi bir editörde taglar arasına ne yazarsanız aynısını taraıcıda gösterir. Örneğin;
<pre>
kitap adı—-nisan– mayıs
——  +++ —-++—-
asp        +++ 50     ++ 50
photoshop++100++ 200
</pre>
Burada ne yazdıysak tarayıcı penceresinde aynısı görünür. İsterseniz deneyebilirsiniz.
EMBED: Html sayfasına müzik eklemek için kullanılır.
<embed autostart=true hidden=true src=”adres”>
autostart= sayfanın açıldığındaki müziğin başlayıp başlamaması gerektiğini belirtir. true başlatır. false başlatmaz.
hidden: müzik kontrol düğmelerinin gizli veya görünür olduğunu belirtir. True görünür. false görünmez.

Benim anlatacaklarım bu kadar.Umarım bu anlattıklarım işiniza yarar.

Öncelikle HTML( Hyper Text Markup Language) işaretleme dili anlamına gelir. İşaretleme dili denmesinin nedeni, sunmak istediğimiz dökümanın, resimlerin yani içeriğin taglar içinde işaretlenip tarayıcı tarafından okunmasını sağlamasındandır. HTML bir programlama dili değildir. Çünkü html ile tek başına çalışabilecek bir program yazamazsınız.HTML W3C(World Wide Web Consortium )  tarafından standartlaştırılmaktadır.

Html’lin asıl görevini  anlamak için bir örnek vermek istiyorum.Örneğin bir tarayıcıda ( firefox,internet explorer,nescape,opera,safari…) hazırladığımız bir metnin görüntülenmesini istiyoruz. Metnimiz şu şekilde olsun
“Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN”.
Bu metnimizi tarayıcının tanıması ve istediğimiz şekilde yorumlaması için taglar(< >) kullanırız. Tag kullanılmasının nedeni vereceğimiz komutlarla düz metinimizin ayrılmak istenmesidir. Yukarıdaki metnimizi taglara dökersek;
<p><font color=”blue”>Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.</font><i>EFLATUN</i></p>
Biz burda tarayıcıya şunu demiş olduk;”bak kardeşim <p> ile başlayan ve </p> diye kapan yerler bir paragrafır. <i></i> arasındakiler italiktir.<font></font> arasındakilerde belirttiğim gibi mavi yazıdır. İşte web tarayıcısı bu dilden anlar ve verdiğimiz tagları yorumlar. Yukarıdaki örneğin görüntüsü şu şekildedir.
Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN
HTML tagları büyük küçük harfe duyarlı değildir. Yani <p> ile <P> aynı şekilde yorumlanır. Yukarıdaki örnekte görüldüğü gibi bir bildirim yaparken bildirimin biteceği yer / işaretiyle kapatılarak sonlandırılır. Her html etiketi / işaretiyle bitirilmek zorunda değildir. Bunu ilerleyen örneklerde görecez.
Peki etiketleri yazdık ama bu etiketlerin HTML e ait olduğunu tarayıcıya nasıl anlatacaz. İşte bunun için yazacağımız etikerleri kapsıcak şekilde <html></html> tanımlaması yapılır. Örneğin;

1. <HTML>
2. <HEAD>
3. <title>ornek web sayfası</title>
4. <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
5. </HEAD>
6. <BODY>
7. ilk html sayfamız.
8. </BODY>
9. </HTML>

Burada tarayıcı <html></html>taglarını kapsayan etiketleri html dili olarak algılar ve öyle yorumlar. Yukarıdaki etiketleri biraz anlatalım.
<head></head> taglarının arasına sayfamız hakkında tanımlamalar yapılır. Mesela sayfamızın hangi dili içerdiği (<meta>) , tarayıcının üstünde çıkacak olan tanımlamasını yazıyoruz(<title>)…
<body></body> taglarının arasında kalan yer gövdedir. Tüm içeriğimizi buraya ekleriz.Düz metin, resim, müzik veya video içerik….
Yani genel olarak anlıcağımız üzere HTML 3 temel tanımlama üstüne kurulur.<html>,<head>,<body>.

<html>
<head>
</head>
<body>
</body>
</html>
Genel yapı bu şekildedir.

Bu şekilde bir sayfa oluşturduktan sonra onu kaydederken .html veya .htm uzantısıyla kaydetmemiz gerekiyor. Yoksa tarayıcımız onun bir html sayfası olduğunu anlamaz. Kaydedilen html dosyamıza baktığımızda hangi tarayıcı işletim sisteminde tanımlanmışsa onun simgesi ile kaydedilir. Ve tıkladığınızda o tarayıcıyla açılır.Farklı tarayıcıyla açmak istiyorsanız üzarine sağ tıklayp birlikte aç sekmesinden diğer tarayıcıyı seçmemiz gerekir.
Bir sayfa oluştururken bir çok editör kullanabiliriz. Eğer ilk defa HTML dilini kullanıyor ve öğrenmek istiyorsanız notpad++ ı öneririm. Bu editör tagları renklendirip sizi yormaz. Bu editörle çalışıp tagları öğrenince microsoftun frontpage veya adobe nin satın aldığı dreamweaver i kullanabilirsiniz. Bu editörlerde başlıklar diğer tanımlamalar daha kolay halledilir. İlerde göreceğimiz tablo oluşturmayı tek tıklamayla halledebilirsiniz. Ben dreamweaver kullanıyorum daha profosyenel ve daha esnek bir editördür.
Oluşturduğumuz bir sayfayı farklı tarayıcılar farklı yorumlayabilirler. O yüzden bir sayfa hazırladıktan sonra farklı tarayıcılarla test etmek yararımıza olur.
HTML dilinin etiketleri yarıdan fazlası metinlerimizi biçimlendirmede ve tanımlamada kullandığımız etiketlerdir.
<p> paragraf etiketidir. <h1><h2><h3><h4><h5><h6> altı ayrı büyüklükteki başlık etiketimizdir. Bunlardan <h1> en büyük puntoda başlıktır ve sona doğru gidildikçe başlıklarımız küçülür.Örnek olarak;
</html> tanımlaması yapılır. Örneğin;

1. <HTML>
2. <HEAD>
3. <title>h1 etiketi</title>
4. <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
5. </HEAD>
6. <BODY>
7. <h1>bu h1 etiketidir.</h1>
8. <h2>bu h2 etiketidir.</h2>
9. <h3>bu h3 etiketidir.</h3>
10. <h4>bu h4 etiketidir.</h4>
11. <h5>bu h5 etiketidir.</h5>
12. <h6>bu h6 etiketidir.</h6>
13. </BODY>
14. </HTML>

Bu kodun görünümü şu şekildedir.

bu h1 etiketidir.

bu h2 etiketidir.

bu h3 etiketidir.

bu h4 etiketidir.

bu h5 etiketidir.

bu h6 etiketidir.

HTML de biçimlendirme etiketlerine geçmeden önce birşey hatırlatmak istiyorum. Html le hazınlanmış bir web sayfasına bu etiketleri kullanmadan CSS (cassading style sheets) yardımıyla biçimlendirebiliriz. Bunu yapmanın 3 yolu vardır. (daha önce anlattığım için burada anlatma gereği duymadım burdan bakabilirsiniz)
Bir metinde, paragrafta veya herhangi bir içerikte bir satır aşağıya inmek için <br> etiketi kullanlır ve kapatılmaz.Bir editör kullanıyorsanız(frontpage, dreamweaver) shift + enter tuşuna denk gelir. eğer yeni bir paragraf açmak istiyorsanız enter tuşuna basmalısınız.
Bir paragrafımızın düzenini Align etiketiyle belirleriz. örneğin <p align=”center”> etiketi paragrafımızın bulunduğu yerde ortalanmasını sağlar. Paragrafımızın sağa dayalı olmasını istiyorsak “right” , sola dayanmasını istiyorsak “left”, iki yana yaslı olmasını istiyorsak “justfy” etiketi kullanılır.
Yazdığımız bir metnin font tipini , büyüklüğünü, rengini <font> tagıyla belirtiriz. Örneğin;
<p><font face=”arial” color=”#ffd400″ size=”12px”>Bu sarı renkte 12px büyüklüğünde bir yazıdır.</font></p> bu kodun görünümü şu şekildedir.

Bu sarı renkte 12px büyüklüğünde bir yazıdır.
Burda “color” ve “face” özelliklerinden bahsetmek istiyorum.
COLOR: css te ve html de color özelliğini tanımlarken ya rengin ingilizce kodunu yada 16 sayı sistemiyle yazılan hexadecimal kodunu yazmak gerekir. Renkler RGB(red-green-blue) karışımından oluşur. 16 lık sayı sisteminde yazılan bir hexadecimal kod kırmızı-yeşil-mavi renklerin ne oranda karışacağını gösterir ve renk tanımlanırken başına diyez(#) işareti konur. Örneğin #000000 kodu hiç bir renk karıştırma demektir o yüzden bu renk siyahtır. #ffffff bu kod hepsini aynı oranda karıştır demekdir o yüzden beyaz rengi içerir. İngilizce renk kodları şunlardır.

#000000=black (Siyah)

#000080=navy (Lacivert)

#0000FF=blue (Mavi)

#008000=green (Yeşil)

#008080=teal (Koyu Yeşil)

#00FF00=lime (Parlak Yeşil)

#00FFFF=aqua (Turkuaz)

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

#800080=purple (mor)

#808000=olive (Zeytunî yeşil)

#808080=gray (Gri)

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

#FF0000=red (kırmızı)

#FF00FF=fuchsia (Parlak pembe)

#FFFF00=yellow (Sarı)

#FFFFFF=white (Beyaz)

Face: bu özellikte font ve font ailesi tanımlannır.Ama burda şuna dikkat etmemiz gerekir. Tanımlayacağımız fontun sayfayı açacak kullanıcının bilgisayarındada yüklü olması gerekir.Yoksa tarayıcı tanımladığımız fontu yorumlayamaz. O yüzden font kullanımında genel font ailelerini seçmemiz gerekir. Web te metinler için genelde verdana kullanılır.

biçimlendirme için bazı etiketler;

<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

<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

<HR>: Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde, vereceğiniz yüklemlere göre yatay bir çizgi çizilmesini sağlar. Bu etiketin kapatılmasına gerek 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.
<b></b>: fontu kalın yapar.
<i></i>: yazıyı italik yapar.

LİSTELEME ETİKETLERİ

iki türden inceleye biliriz.

1:SIRASIZ LİSTELER(unordered): Bir liste hazırlarken hazırladığımız listenin ya içi dolu ya da içi boş bir yuvarlak, veya dört köşe nokta şeklinde olmasını istiyoruz. Bunun için <ul></ul> etiketi kullanılır.<ul></ul> etiketlerinin arasına sıra belirten <li> tagı kullanılır. Kapatmak zorunda değiliz ama kapatılarakta kullanılabilir. Örnek;

<ul type=” disc“>

<li>ilk</li>
<li>ikinci</li>
<li>üçüncü</li>
</ul> Bu kodun görünümü şu şekildedir.

• ilk
• ikinci
• üçüncü

Dikkat ettiyseniz type özellğini kullandım. Listemizin sıralanmasının içi dolu daire olmasını sağladım.DISC, içi dolu daire ;CIRCLE, içi boş daire; SQUARE dörtköşe nokta ile sıralanmayı sağlar.

2:Sıralı listeler;

Listemizi oluştururken harfle veya rakamla başlatmamızı ve sıralamamızı sağlar.<ol></ol> tagları bu iş için kullanılır. Örneğin;

<ol type=” 1″>
<li>ilk</li>
<li>ikinci</li>
<li>üçüncü</li>
</ol> Bu kodun görünümü şu şekildedir.

1. ilk
2. ikinci
3. üçüncü

yine listemize niteliğini veren type özelliğidir ve şu komutları alır.

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.
Buraya kadar sanırım HTML nedir ve nasıl kullanılır sorularına yanıt bulduk.Şimdi html için en önemli konu olan tablolardan bahsedeceğim. Bu konu biraz uzun olduğundan –diğer yazımda– devam etmek istiyorum.