JavaScript Lightbox Kullanımı

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.

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.

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	Ordered List                                   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>	Html 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.

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 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..

Twitter Arka Planları ( twitter backgrounds )

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.

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 :	Istanbul Bursa Sakarya Kocaeli Izmir Manisa Aydin Antalya Isparta Mersin Ankara Kars Balikesir
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>

Dreamweaver Cs5 Site Tanımlama

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

• 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.

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

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.

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.