23 Aralık 2012 Pazar

PHP İletişim Formu

Php ile iletişim formu oluşturma;

Daha önce html ile iletişim formu oluşturmayı göstermiştim.Şimdi ise Php iletişim formu yapmayı göstereceğim. Php ile html olarak oluşturduğunuz iletişim formu üzerinden e-mail nasıl alabiliriz ? Bunun kodlarını sizlerle paylasacağım.

İletişim Formu Niçin Gereklidir ?
 
Siteye gelen ziyaretçilerimiz bizimle geri bildirim , soru sorma gibi sebeblerden dolayı iletişim kurmak isteyebilirler.Buda siteye gelen ziyaretçilerle aramızda bir kontakt kurmamızı saglar bu açıdan olusturdugumuz sitelerde iletişim formu oldukca önemli bir rol oynamaktadır.

Gelelim Php ile iletişim formu olusturmaya ;

İlk olarak formunuzda neler olmasını istiyorsanız ona göre php de değişkenler atarız.
İsim ,mail adresi,mesajın konusu ve mesaj içerigini kapsayan bir iletişim formu hazırladım.Ve bunu mail.php olarak kaydettim.

Mail.php


<?php
$name=$_POST['name'];
$mail=$_POST['mail'];
$subject=$_POST['subject'];
$details=$_POST['details'];
$header="From: $mail\r\n".

        "Content-Type: text/html; Charset=utf-8\r\n"
;

if (!eregi ("^([a-z0-9_]|\\-|\\.)+@(([a-z0-9_]|\\-)+\\.)+[a-z]{2,4}$",$mail)) die ("Please enter the correct e-mail.");
   
       
if ($name=="" || $mail=="" || $subject=="" || $details=="")

{
echo "Lütfen Boş alanları Doldurunuz.";
}
else{
mail("mailadresiniz@localhost",$subject,$details,$header);
echo "Mesajınız gönderilmiştir.Teşekkürler ";

}

?>







Öncelikle php iletişim formundaki php kodlarını açıklayalım;
name, mail , subject,details,header adında değişkenler olusturduk, ardından mail dogrulama kodunu ekledik ve sonra eğer komutuyla name , mail,subject ve details değişkenlerınden herhangi birinini boş olması durumunda, lütfen boş alanları doldurunuz yazısını echo komutuyla ekrana yazdırdık.Tüm mail formumuz dogru bir sekilde doldurdugunuzda Teşekkür yazımızı ekrana yazdırdık.


Hata gösterimini kapatmak için ;

error_reporting(E_ALL ^ E_NOTICE);
ini_set('error_reporting', E_ALL ^ E_NOTICE ^ E_DEPRECATED); 

kodları <?php başlangıç kodunun altına ekleyebilirsiniz. Ben bu formu localhostta çalıstırdıgım için mailadresi uzantısnı localhost olarak yaptım.Eğer localhostta calıstırmak ıstersenız mercury ayarlarını yapıp Mozilla Thunderbird i kullanabilirsiniz.

Php mail adresi doğrulama :

Bir Diğer onemlı husus da mail yazımının gerekli olması yani formu dolduran kişinin doğru mail adresi yazmadan bu formun gönderimi engellemek, bunun içinde aşağıdaki kodu kullanmayı unutmayınız. 

if (!eregi ("^([a-z0-9_]|\\-|\\.)+@(([a-z0-9_]|\\-)+\\.)+[a-z]{2,4}$",$mail)) die ("Please enter the correct e-mail.");


Şimdi Html İletişim Formunu Oluşturalım ;

ben cok basit olarak bir html formu olusturdum Css ile sizler formun görünümünü zenginleştirebilirsiniz.

Mail.html


<form action="mail.php" method="post">
<p>Name</p><input name="name" type="text" />
<p>Mail</p><input name="mail" type="text" />
<p>Subject</p><input name="subject" type="text" />
<p>Message</p><textarea name="details" cols="" rows="" wrap="default"></textarea>
<input name="" type="submit" value="Submit" />
</form>



html sayfamızda form olusturmak için yeni form ekliyorsunuz,ve action a php dosyanızın adını yazıyorsunuz."post" methodunu seçiyorsunuz.Ardından eklediğiniz her text alanına php değişkenlerinin adını yazıyorsunuz zaten ikisini kontrol ettiğinizde görecekseniz.Umarım işinize yarar bir yazı olmustur , Herkese iyi çalısmalar.

php iletisim formu

14 Aralık 2012 Cuma

Css Border Radius Oval Köşe Oluşturma

css 3 ile resim kullanmadan sadece css kodları kullanarak arka planlarınızın köşelerini border radius kullanarak ovalleştirebilir sitenizin görünümünü dahada zenginleştirebilirisiniz.

#kenar1 {width:90px;
                height:30px;
                              border-radius: 10px;
                           background: olive;
}

#kenar2 {width:90px;
                 height:30px;
                                border-radius: 10px;
                                   border: 3px solid blue;
}


 #kenar3 {width:70px;
                 height:70px;
                                             border-radius: 5px 20px 5px;
                           background: silver;
}
#kenar4 {width:70px;
                height:70px;
                                       border-radius: 10px 30px;
                          background: orange;
}

Kenar 1:


Kenar 2

Bu iki örnekte görüldüğü gibi bütün köşeler oval bir görünüm almıştır.Css ile köşeleri oval yapmadaki tek husus border radius kodu ' dur.

Kenar 3

Kenar 4

Mesela sadece sol üst tarafı ovalleştirmek isterseniz ; border-radius-top-left yada sadece sol alt tarafı ovalleştirmek isterseniz ; border-bottom-left-radius gibi kodları kullarak zenginleştirebilirsiniz.

13 Aralık 2012 Perşembe

CSS Yatay Menu Yapımı

Bu makalemde Blog veya Websitelerinize eklemek için CSS yatay Menu yapımını kısa ve basit bir sekilde anlatacağım.Sizlerde kodları takip ederek basit bir sekilde kendinize özgü blog veya websiteniz için yatay menüler hazırlayabilirisiniz.
Açıklama Css Kod
ilk olarak menu adında bir div id olustuyoruz genisligini 500px font tipini font un boyutunu arka plan rengini gibi ayarlarını dilediginiz gibi ayarlayabilirisiniz. #menu {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px;}
li list item dan gelen bir html etiketidir.menu listesini sıralamak amacıyla yazılır.float left sola yaslama anlamına gelmektedir.yani liste elemanlarını soldan saga dogru sıralayacagız.
a harfi liste elemanlarına link vermek amacıyla yazılır.linklere hover efekti uygulamak için de a:hover kullanılır.Hover efekti linkin üzerine mouse ile gelince görünümünün degişmesidir.
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
}
#menu li a:hover{
background-color: #fff;
border-bottom: 2px dotted #DDD;
color: #999;
}
wrapper'ı css menu'nün iskeleti gibi düşünebilirisiniz.menü'nun taşıp dagılmasını engellemek için kullanırız burada ayrıca border dotted kullandım siz border stilini degiştirebilirsiniz.
bu kısa acıklamalardan sonra menumuzu tamamlamıs olduk.
#menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; }
#menu_wrapper.yatay a {color: #fff;}
#menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }
Şimdi buraya kadar yazdığımız kodlar css içindi,hazırlamış olduğumuz Css menu'nün gözükmesi için html kodları eklememiz lazım. < body > etiketleri içine < / body >
<div id="menu_wrapper" class="yatay">
                    <ul id="menu">
                <li><a href="#">Ana Sayfa</a></li>
                <li ><a href="#">Hakkımda</a></li>
                <li><a href="#">Portfolyo</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </div>
bu etiketleri yazdıktan sonra yazının içindeki yatay css menümüzü olusturmuk olduk.Şimdi tamamen kaynak kodları toplu bir şekilde ekliyorum daha rahat denemeler yapabilmeniz açısından sizler için daha yararlı olacaktır.

--- CSS KODLARI ---


  • #menu { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px; }
  •  #menu li { float: left; margin: 0; }
  •  #menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; }
  •  #menu li a:hover{ background-color: #fff; border-bottom: 2px dotted #DDD; color: #999; }
  •  #menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; }
  •  #menu_wrapper.yatay a {color: #fff;}
  •  #menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }

--- HTML KODLARI ---

  • <div id="menu_wrapper" class="yatay">      
  • <ul id="menu">
  • <li><a href="#">Ana Sayfa</a></li>
  • <li ><a href="#">Hakkımda</a></li>
  • <li><a href="#">Portfolyo</a></li>
  • <li><a href="#">İletişim</a></li>
  •  </ul>
  • </div>

11 Eylül 2012 Salı

Photoshop Altın Yazı Efekti

Photoshop ile altın yazı efekti yapmayı anlatacagım, sizlerde bu efekti kullanarak çeşitli grafikler ve arka planlar oluşturabilirsiniz.

İlk olarak bir calışma alanı olusturun boyutlarını siz belirleyebilirsiniz önemli değil , çalısma alanınızın rengi (#443501) renk kodunda olmalı . Ardından Blending Options dan Gradient overlay ı acın.Ve sekilde goruldugu gibi gerekli ayarlamaları yapın.

altın_yazı_efekti

Ardından Yeni bir Layer olusturun , Filter>Texture>Texturizer efektini uygulayın.

Bu adımları uyguladıktan sonra sıra Yazı Eklemeye geldi , Text aracıyla (T) kendi belirlediginiz bir fontta ve büyüklükte bir yazı yazın. Ben blogspot yazdım .

altın_yazı_efekti


10 Eylül 2012 Pazartesi

En İyi Torrent Siteleri

torrent

Film , Dizi , Müzik , Bilgisayar programı vs gibi dosyalar indirip paylaşabileceginiz popüler ve ücretsiz kaliteli güvenilir torrent sitelerini paylasacagım , sizlerde bildiginiz kaliteli torrent sitelerini makalenin yorum kısmına yazarak En iyi torrent siteleri listesi ne katıkıda bulabilirsiniz.


9 Eylül 2012 Pazar

Blogger Temaları (Blogspot Templates)


blogspot icon
Blogunuzun görünümünü değiştirmek istiyorsanız internetten seçtigim  blogspot template lerini sizinle paylasmak istiyorum.Klasik blog şeması ndan çok farklı blog tema ları var , dilerseniz sizlerde blogunuzun template ni değiştirebilir oldukça gelişmiş görünümlü bir blog tema sına sahip olabilirsiniz. 

Öncelikle blogunuza nasıl tema yüklersiniz onunla başlayalım, ardından sırasıyla Blog template lerine göz atmınızı öneririm.

Blogspota Nasıl Tema Yüklenir ? 

Blogspot a tema yüklemek için ;

Blogger paneline giriş yaptıktan sonra sırasıyla

Tasarım > HTML i düzenle > Sabit sürücünüzdeki bir dosyadan şablon yükleyin > Göz at butonuna

tıklayın ve indirdiğiniz xml dosyasını yükleyin. Bu adımlarla Blogunuza yeni temanızı yüklemiş olursunuz.Blogger a tema yüklemek için aşağıdaki görüntülü videodan da faydalanabilirsiniz.


Sunset Farm - Nature Theme Blogger Template

blogspot template

 

My Website 2 Column Blogger Template

blogger template

6 Eylül 2012 Perşembe

En İyi Mozilla Eklentileri

Milyonlarca internet kullanıcısının kullandığı Web Tarayıcısı Mozilla Firefox un en iyi ve en cok indirilen eklentilerini paylasacagım.Sizlerde bu eklentilerden faydalanarak Web Tarayıcınızı kendinize özel bir şekilde düzenleyebilirsiniz.
En iyi mozilla eklentileri ni aşağıda sıralamaya çalıştım.Eğer sizinde kullandığınız mozilla eklentileri varsa yorum kısmında paylaşırsanız yazının gelişmesi için faydalı olur.


Easy YouTube Video DownloaderEasy YouTube Video Downloader 6.5 : Easy Youtube Video Downloader eklentisiyle tek tıklamayla M4A, MP3, MP4, AAC, FLV and HD formatlarında youtube dan ücretsiz indirme yapabilirsiniz. 
İndirmek için ;

    Firebug Firebug : Mozilla firefox için; Firebug eklentisini kullanarak herhangi bir websitesini Html , Css , Javascript kodlarını görüntüleyebillir ve kendinize göre canlı olarak kodları düzenleyebilirsiniz.

    İndirmek için ;
      Adblock Plus

      Adblock Plus: Firefox un ücretsiz reklam engelleyicisi websitelerinde bulunan ve görmeyi istemediginiz reklamları engellemek için oldukça fazla kullanıcı tarafından indirilen mozilla 'nın en iyi eklentilerinin başında gelir.
      İndirmek için ;

      5 Eylül 2012 Çarşamba

      JavaScript Lightbox Kullanımı

      javascript_lightbox
      Lightbox ; hemen hemen içerisinde resim barındıran bütün websitelerinde kullanılan oldukça popüler bir javascript uygulamasıdır. Bir başka deyişle Lightbox herhangi bir resmin üzerine tıklayınca resmin büyümesidir.Örnegin yeni bir websitesi tasarlıyorsunuz ve galeri sayfası veya  kücük resimlerden olusan bir alan ayırdınız.Burada sitenize gelen ziyaretçiler sitedeki resimlere tıkladıgında resim büyürerek daha detaylı bir görünüme sahip olur.Bir anlamda sitenizde javascript lightbox kullanarak html sayfanızı  dinamikleştirmiş olursunuz.Şimdi gelelim javascript lightbox kullanımına;

      Öncelikle Lightbox u indireceğimiz  siteye giriş yapalım  ve Download kısmından Lightbox v2.51 versiyonunu indirelim . Lightbox u indirdikten sonra lightbox rar lı  dosyasının içinde

      • Css
      • Images
      • Js 
      3 tane dosya olacak. Bu 3 dosyayı sitenizin bulundugu kök dizine atınız.Veya kendi klasörlerinizin içine ekleyeniz.Örnegin kendinizin bir css klasörü varsa o css klasörünün içine Css dosyalarını ekleyebilirsiniz.
       Dosyaları ekledikten sonra ; Şimdi Html dosyamıza bu dosyaların yollarını gosterelim.

      Öncelikle Css dosyasını yolunu gösterelim ;

      •  <link href="css/lightbox.css" rel="stylesheet" media="screen" />

      Sonra Javascript ve JQuery dosyalarını ekleyelim ;


      • <script src="js/jquery-1.7.2.min.js"></script>
      • <script src="js/lightbox.js"></script>
       

      Bu dosyaları html sayfamıza cagırdıktan sonra .Lightbox u aktif etmemiz için son kodumuzu ekleyerek lightbox işlemini halletmiş olacağız.

      Lightbox efektini aktif etmek için  resme link verirken rel="lightbox" niteligini eklememiz gerekir.

      •  <a href="images/1.jpg" rel="lightbox">

      Dreamweaver Cs 5 programında kullandıgım ve sonucu sizinde daha iyi gorebilmeniz acısından bütün kodların bir arada yer aldıgı ekran goruntusunu paylasmak istiyorum. Uygularken herhangi bir hata ile karsılasmamanız acısından ve daha rahat uygulayabilmeniz amacıyla bu resime bakarak lightbox uygulamasını daha rahat kullanabilirsiniz.

      javascript_lightbox

      Son olarak js lightbox un mucidi Lokesh Dhakar teşşekür ederek yazımı sonlandırmak istiyorum, Daha detaylı bilgi almak için  http://lokeshdhakar.com/ sitesini ziyaret edebiliriniz.

      19 Ağustos 2012 Pazar

      Html Dersleri Html Liste Ve Örnekler

      Html de listeleme yapmak için en yaygın olarak kullanılan Ordered List (sıralı listele)  ya da Unordered List (sırasız liste) dır.

      Ordered List
      1. Ordered List                                  
      2. Sıralı liste
      Unordered List
      • unordered List 
      • sırasız liste


        Sıralı ve sırasız sıralama yı tanımlamak gerekirse tablodada gordugunuz şekildeki gibidir.Ayrıca Websitesi menu tasarımlarında da unordered (sırasız liste) yöntemi kullanılır.

        Sıralı listeleri tanımlamak için <ol> </ol> etiketleri kullanılır. Sıralayacamız her nesne için <li> etiketleri kullanılır.

        Sıralı liste  ;
        Örnek Kullanım
        (Ordered List)

        <ol>
        <li>html</li>
        <li>css </li>
        </ol>
        1. Html
        2. Css

        Sırasız listeleri tanımlamak için <ul> </ul> etiketleri kullanılır.Sıraladıgımız her nesnenin basına kucuk bir nokta işareti getirir.Her nesne için de aynı sekilde <li> </li> etiketleri kullanılır.

        Sırasız liste  ;
        Örnek Kullanım
        (Unordered List)

        <ul>
        <li>html</li>
        <li>css </li>
        </ul>
        • Html
        • Css

        Html liste yöntemleri kısaca bu sekıldedir.

        17 Ağustos 2012 Cuma

        Css Şablon Oluşturma ( Css Template)

        Web tasarımına yeni başlayanlar veya Css de hazır şablona ihtiyac duyanlar için hazırladıgım bir kaç basit Css şablonu sizlerle paylasmak istiyorum.

        Css şablonları kullanarak kısa sürede websitesi olusturabilirsiniz.Tabi Css kullanmanın yanı sıra javascript ,ajax ,flash vb programları kullanarak sitenizi daha dinamik bir hale getirebilirsiniz.Ama webtasarımının temeli Xhtml ve Css ile başlar .O yüzden temel düzeyde olsa dahi xhtml ve css kullanmayı bilmelisiniz.

        Resimde görmüş oldugunuz Css şablonun kodlarını aşagıda bulabilir.Ve bu kodları kullanarak css şablon olusturabilirisiniz.Kendinize gore düzenleyerek farklı bir Css şablonda olusturmanız mumkün.

        css şablon
        Css Şablon ( Css Template)
        * {
            vertical-align: baseline;
            font-weight: inherit;
            font-family: inherit;
            font-style: inherit;
            font-size: 100%;
            border: 0 none;
            outline: 0;
            padding: 0;
            margin: 0;
        }
        #footer {
            width: 960px;
            margin-right: auto;
            margin-left: auto;
            background-color: #3CF;
        }
        html, body {
            height: 100%;
        }
        #outerWrapper {
            margin: 0px auto -4em;
            width: 960px;
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }
        #header {
            width: 100%;
            background-color: #39F;
        }
        #contentWrapper {
            width: 100%;
            overflow: auto;
        }
        #sidebar {
            width: 200px;
            float: left;
            background-color: #36C;
            height: auto;
        }   
        #content {
            width: 760px;
            float: right;
            background-color: #369;
        }

        #right {
            width: 380px;
            margin-right: auto;
            margin-left: auto;
            float: right;
        }
        #left {
            float: left;
            width: 380px;
            margin-right: auto;
            margin-left: auto;
        }
        </style>

        • Yukarıdaki kodlar Css için isterseniz bu kodları harici bir css dosyasıyla kullanırsınız. Yada Html dosyanızın içinde html kodlarıyla birlikte kullanırsınız.Css i tanımlamanın 3-4 çeşit yontemi vardır.

        </head>

        <body>
        <div id="outerWrapper">
          <div id="header">
            <p>Content for id "header" Goes Here</p>
            <p>&nbsp;</p>
          </div>
          <div id="contentWrapper">
            <div id="sidebar">
              <p>Content for  id "sidebar" Goes Here</p>
         
            </div>
            <div id="content">
              <p>Content for  id "content" Goes Here </p>
              <div id="lipsum">
                <p>&nbsp;</p>
               
              </div>
              <div id="left">
                <p>Content for  id "left" Goes Here</p>
                <p>&nbsp;</p>
         </div>
        <div id="right">
         <p>Content for  id "right" Goes Here</p>
         </div>
         </div>
         </div>
         <div id="footer">Content for  id "footer" Goes Here</div>
         </div>
        <div id="footer">
        </div>
        /body>
        </html>

        • Buradaki kodlarımız da html kodlarıdır.Olsuturdugumuz Css divleri tanımlamamız gerektiginden bu kodları yazmak zorundayız.
        Ben arka plan renklerini divler belirgin olsun diye renkli yaptım.Yani arka plan renklerini kaldırmanız sizin acınızdan daha faydalı durum olur.Ayrıca Sidebar divinin yüksekligini kendiniz ayarlayabilirsiniz..Burdaki kodları kullandıgınız takdirde resimdeki sablonun aynısını elde edersiniz.Tabi bu sadece basit bir şablondur yeni baslayan arkadaslara umarım faydalı olur..

        12 Ağustos 2012 Pazar

        Twitter Arka Planları ( twitter backgrounds )

        twitter_logo
        Son yılların en popüler sosyal medya platformu olan twitter profiliniz için, arka plan içeren ve twitter arka planlarını ücretsiz indirip kullanabileceğiniz bir kaç web sitesi tanıtmak istiyorum.

        Eğer fireworks, photoshop gibi programları kullanabiliyorsanız çok basit bir şekilde kendinizde twitter için arka plan olusturabilirsiniz.




        8 Ağustos 2012 Çarşamba

        HTML İletişim Formu (contact form)

        Yeni bir html konusuyla devam etmek istiyorum.Hemen hemen bütün web sitelerin de iletişim formu vardır.

        İletişim formu neden gereklidir ? 

        iletisim formu sayesinde sitemize gelen ziyaretçilerle iletişim kurabilir , onların görüşlerini ve isteklerini öğrenebilir böylelikle site ziyaretçilerimiz ile site sahibi arasında bir kontakt kurulmuş olur. kısaca açıklamak gerekirse  iletisim formununu bu sekilde tanımlayabiliriz.

        Şimdi Html iletişim formumuzu adım adım olusturmaya başlayalım.

        Öncelikle Adı Ve Soyadı girişi yapılması için ıkı tane metın kutusu ekleyelim :

        <input type="text" name="ismi"  />
        <input type="text" name="Soyismi"  />
         
        metin kutusu eklemek için input type text etiketini kullanırız. 
         
        Metin kutularını ekledikten sonra şimdi Onay kutusu nu ekleyelim.
         
        <input type="checkbox" name="medeni" value="evli" /> onay kutusunu eklemek
        için checkbox etiketini kullandık 

        Şimdi ise Adres , içerik vs için eklememiz gereken text area kısmını ekleyelim.

        <textarea name="adresi" rows="6" cols="40">

        Açılır çoklu seçenek kutusu yani listbox :

        <select name="iller" size="1">
        <optgroup label="Marmara">
        <option>Istanbul</option>
         
        gibi etiketleri kullanacagız. 
         
        Radio buton eklemek için radio etiketini kullanacagız. 
         
        <input type="radio" name="uzman" value="Photoshop" /> 
         
        Son olarak buton ekleyerek formumuzu tamamlamış olacagız. 
         
        <input type="submit" value="Gönder" /> 
         
        kodları takip ederseniz aşagıdakı formun aynısını olusturabilirsiniz.
        Ayrıca CSS kullanarak görünüm olarak cok daha zengin gornume sahip 
        bir form elde edebilirsiniz. 

        Örnek İletişim Formu 

        Adi :
        Soyadi :
        Medeni Durumu : Evli
        Bekar
        Adresi :
        Yasadiginiz Sehir :
        Uzmanlik Alani :
        Flash


        Photoshop


        Fireworks


        Php


        Son olarak Form için bütün html kodlarını ekliyorum.Bu kodları kullarak aynı form a sahip olabilirsiniz.İstedıgınız sekılde uzerınde calısıp daha da güzel bir form haline getirebilirsiniz.

        <b><td> Soyadi : </td><b>
        <td><input type="text" name="Soyismi" /></td>
        <tr>
        <td>Medeni Durumu : </td>
        <td><input type="checkbox" name="medeni" value="evli" /> Evli
        <input type="checkbox" name="medeni" value="evli" /> Bekar </td>
        <tr>
        <td> Adresi : </td>
        <td><textarea name="adresi" rows="6" cols="50"></textarea></td>
        </tr>
        <tr>
        <td> Yasadiginiz Sehir : </td>
        <td><select name="iller" size="1">
        <optgroup label="Marmara">
        <option>Istanbul</option>
        <option>Bursa</option>
        <option>Sakarya</option>
        <option>Kocaeli</option>
        </optgroup>
        <optgroup label="Ege">
        <option>Izmir</option>
        <option>Manisa</option>
        <option>Aydin</option>
        </optgroup>
        <optgroup label="Akdeniz">
        <option>Antalya</option>
        <option>Isparta</option>
        <option>Mersin</option>
        </optgroup>
        <optgroup label="Diger">
        <option>Ankara</option>
        <option>Adana</option>
        <option>Balikesir</option>
        </optgroup>
        </select>
        </tr>
        <tr>
        <td>Uzmanlik Alani : </td>
        <td><br><input type="radio" name="uzman" value="Flash" />Flash<br/>
        <br><input type="radio" name="uzman" value="Photoshop" />Photoshop<br/>
        <br><input type="radio" name="uzman" value="Fireworks" />Fireworks<br/>
        <br><input type="radio" name="uzman" value="Php"/>Php<br/></td>
        </tr>
        <tr>
        <td></td>
        <td><input type="submit" value="Gönder" />
        <input type="reset" value="Temizle" /> </td>
        <tr>
        </tr>
        </form>
        </body>

        4 Ağustos 2012 Cumartesi

        Dreamweaver Cs5 Site Tanımlama

        dreameweaver cs5  logo


        Dreamweaver programını kullanarak site olustururken , ilk yapmamız gereken işlerden biri site tanımlamadır. Eğer ayrıca local host üzerinden sitenizi test etmek istiyorsanız mutlak suretle sitenizi tanımlamanız gerekir.

        Öncelikle "Site"  sekmesine gelin ve ordan " New Site" sekmesine tıklayarak yeni bir site olusturarak site tanımlama işlemine başlayalım.

        Ardından karsımıza cıkan resimde ki gibi sekmeyle karsılasacagız

        dreamweaver_site_tanımlama

        • Site Name : Tanımlamıs olacagımız sitenin adını verecegiz.Sitenize hangi ismi vermek istiyorsanız onu girebilirisiniz.

        • Local Site Folder : Local Site Folder da ise web siteniz için olusturacagınız sayfalar resimler dosyalar vs. nerede tutacagınızı belirleyeceginiz yerdir.Kısacası sitenizin dosyalarının tutulacagı yerdir.
        Burayı tamamladıktan Sonra Servers Kısmına gelelim. Server Kısmında localhost tan yani Xampp veya Wampp gibi programlar kullanıyorsak yada php mysql web uygulamaları kullanarak site olusturuyorsak tanımlamamız gerekir.

        dreamweaver_site_tanimlama

        Basic ayarlardan hemen server'ı tanımlayalım ;

        Server Name : Serverımıza verecegimiz ismi girelim istedigimiz bir ismi girebiliriz

        Connecting Using: Burada local /network u secelim çünki kendi bilgisayarımızdan baglantı olusturacagız.

        Server Folder : locate site folder olusturdugumuz dosya yolunun aynısını buraya ekliyoruz.

        Web URL : Web url miz ise tarayıcıda girecegimiz adrestir . Burada localhost uzantılı ve site adımızla birlikte olmalıdır.

        Örnek olarak ; http://localhost/tourism/index.html

        dreamweaver_site_tanımlama

        Advanced Settings kısmında ise ;


        Default Images Folder : burada locate site folder içine bir tane images folder olusturacagız ve bunu default images folder olarak tanımlayacagız site için olusturdugumuz resimleride images folder kısmında bulunduracagız.

        Site-Wide Media Quey File : Burada siteniz için olustaracagınız media dosyalarını eklemek için olusturacagınız dosyanın yolunu gostereceksiniz.

        Web URL : web url yi yukarıda ayarlamıstık aynı sekilde olacak.

        Bu kadar ayarlamaları yaptıktan sonra daha fazla detaya girmeden save diyerek dreamweaver cs5  site tanımlama işlemini bitiriyoruz.

        23 Temmuz 2012 Pazartesi

        HTML Tablo Oluşturma

        Diger html derslerimizin devamı ve 3 cü ayagı olan html ile tablo olusturma yöntemini göstereceğim.

        Eger bir dreamweaver kullanıcısıysanız html ile tablo olusturmak için tek tek kod yazmanıza gerek yoktur.Ama Html ögrenmek istiyorsanız html etiketlerinin ne işe yaradıgını bilmenizde fayda vardır.

        Html tablolarını olusturarak içine resim , yazı vb şeyler ekleyerek tablonuzu şekillendirebilirsiniz.
        Dikkat etmeniz gerek husus , bir web sayfasını sadece html tablolar kullanarak olusturmamanız, Çünki tablolar başka tarayacılarda farklı gözükebilir. Bu da sitenizin statik görünümünü bozar.


        tableheaders tableheaders tableheaders tableheaders
        2011  
        2012


        html tablolalarını <table > etiketi ile tanımlarız. tabi table etiketini kapatmayı unutmayın </ table>.

        Şimdi tablomuzun anaunsur etiketlerini tanımlayalım ve bu etiketlerle nasıl tablo olusturacagınızı cok basit bir sekilde gormus olucaksanız.
        • <tr>  etiketi : table row manasına gelir . kaç sıra kullanıcaksınız o kadar tr etıketı kullanmalısınız.Yukarıdan asagı dogru 3 tane tr kullanmıs olduk.
        • <th> etiketi : table header anlamına gelir. Tablodada gormus olacagınız gibi tablonuzun başlıkları için kullanabilirsiniz.
        • <td> etiketi : table data manasına gelir. Tablo içine girmiş oldugunuz bilgileri gosterır.Tabloda boş gözüken kutucuklar td etiketi içindir.

        son olarak tablomuzun html kodlarını eklemek istiyorum ; sizde bu kodları kullanıp veya degıstererek kendınıze daha uygun ve kullanıslı bir hale getirebilirsiniz.

        <table align="center" border="3" height="50" style="width: 250px;">
        <tbody>
        <tr>                
        <th scope="col" width="20">tableheaders</th>               
         <th scope="col" width="20">tableheaders</th>                
        <th scope="col" width="20">tableheaders</th>  
                      
        <th scope="col" width="20">tableheaders</th>               
        </tr>
        <tr>
        <th height="22" scope="row">2011</th>                
        <td></td>
          <td></td>   
         <td>&nbsp; </td> 
           </tr>
        </tbody>              <tbody>
        <tr>
        <th scope="row">2012</th>           
        <td></td>
         <td></td>
        <td></td>  
        </tr>
        </tbody></table>

        <table align="center" border="3" height="50" style="width: 250px;">
        • align " center " etiketi ortaya hizalama manasına gelir .
        • border tablonun çercevesidir. eger border degeini 0 yaparsak tablonun çercevesi gozukmez.
        • height ve width : ise tablonun genişligi ve uzunlugu için kullandıgımız etiketlerdir.

        14 Temmuz 2012 Cumartesi

        Xampp Server Kurulumu Resimli Anlatım

        xampp server kurulumu
        İlk olarak Xampp Server nedir ? Bunu kısaca anlatmak istiyorum.
        Xampp Server en popüler webserver sunucusu paketidir.Paketin içinde PHP, MySQL, Apache, FileZilla ve MercuryMail gibi web sunucularınıda bulabilirsiniz.Php ile programlamıs oldugunuz websitenizin düzgün çalısıp çalışmadıgını test edebilir,mysql kullarak veritabanı olusturabilirsiniz.MercuryMail ile localhosttan mail alabilir mail atabilirsiniz.Filezilla ile de ftp sunucunuza dosya aktarımı yapabilirsiniz.

        Önce Xampp Server i  http://www.apachefriends.org/en/xampp-windows.html adresine girerek bilgisayarımıza indirelim.

        XAMPP 1.7.7 versiyonun içinde ;

        • Apache 2.4.2
        • MySQL 5.5.25a
        • PHP 5.4.4
        • phpMyAdmin 3.5.2
        • FileZilla FTP Server 0.9.41
        • Tomcat 7.0.28 (with mod_proxy_ajp as connector)
        • Strawberry Perl 5.16.0.1 Portable
        • XAMPP Control Panel 3.0.12 (from hackattack142) 
        gibi servisler bulunmaktadır .

        Xampp Server 1.7.7. i bilgisayarımıza download ettikten sonra bilgisayarımıza kurmaya başlayalım.

        indirdigimiz dosyaya çift tıklayarak kurulum sihirbazını başlatalım.

        xampp server kurulumu
        burada Xampp serveri kuracagımız yeri belirliyoruz.En iyi seçim default olarak gelen C:\xampp\ olarak belirlemek.Xampp serveri kuracagımız yeri belirledikten sonra.Next diyerek devam edelim

        xampp server kurulumu
        Burada Kurulum seçenekleri mevcut.Ve kullanmak ıstedıgımız servisleri de diledigimize gore secebiliyoruz.Secımlerimizi tamamladıktan sonra bize son olarak kurulumun tamamlandıgına dair bilgi geliyor.Ve Finish butonuna basarak kurulumu tamamlamıs oluyoruz.

        xampp server kurulumu

        Xampp server i kurduktan sora artık bilgisayarımızı bir websunucusu olarak kullanabiliriz.Ve localhost tan calısmalarımıza baslayabiliriz.
        //Luckyorange//