Css ve jquery ile desen kilidi yapımı

Css ve jquery dersleri – desen kilidi yapımı

Selamün Aleyküm değerli takipçilerim, Html site yapımı derslerimizde html sayfa oluşturma ve html sayfalara link verme işlemlerini anlattım ve jquery konusuna da iki dersimde değindim. Bugün hem bildiklerimizi pekiştirmek adına hemde yeni bilgiler katmak adına uygulamalı bir örnek yapacağız.  Bu uygulama ile akıllı telefonlardaki “Desen Kilidi” sistemini web ortamında yaparak mantığını az da olsa kavramanızı sağlayacağım. Telefondaki gibi desen çizerek doğru veya yanlış şifreler ile giriş yapmaya çalışacağız.

Css Dersleri” ve jquery dersleri‘nin bir arada olduğu konunun videosu

25 Aralık 2016 Saat : 4:41
admin
devamını oku

Html Dersleri 10 – İletişim Sayfası Yapımı

İletişim Sayfası Nasıl Yapılır?

Selamün aleyküm, önceki dersimizde yarım bıraktığımız iletişim sayfasını bu derste tamamlıyoruz. “İletişim sayfası yapımı” konulu bu dersimizde iletişim bilgilerinin ve iletişim formunun bulunduğu bir “html iletişim sayfası” ve bu sayfanın css kullanılarak nasıl zenginleştirilebileceği gösterilmiştir.

Video biraz uzun oldu ancak iletişim sayfası tasarımını daha iyi anlayabilmeniz adına ağır işledim. Kodlar nereden geldi nasıl oldu gibi soru soran arkadaşlar, kodların tamamı önceki derslerin devamıdır önceden kullanmadığım hiçbir kod yoktur önceki dersleri titizlikle takip ederseniz herşeyi en baştan çok iyi anlayarak yapabilirsiniz.

İletişim sayfası kodlarına erişmek için buraya tıklayın

9 Ocak 2016 Saat : 2:38
admin
devamını oku

Html Dersleri 9 – Sayfa oluşturma ve link verme

Html sayfa oluşturma ve link verme

Merhaba arkadaşlar, Html site yapımı dersimizde html sayfa oluşturma ve html sayfalara link verme işlemlerini anlattım. Daha önceki derslerde oluşturduğumuz basit html sayfasını geliştirmeye devam ederek menüde var olan diğer sayfaları da oluşturarak tıklandığında o sayfalara nasıl ulaşabiliriz, link verilen yazılarda css ile nasıl düzenleyebiliriz gibi sorulara yanıt bulabileceğiniz bir ders videosu daha çektim.

Html dersleri” 9 kodlarının browserde görünümü için tıklayın

6 Aralık 2015 Saat : 12:57
admin
devamını oku

jquery ile kendi sliderinizi yapın

Merhaba dostlar, bugün sizlere slider yapımı hakkında bilgi vereceğim. Biliyorsunuz heryerde hazır sliderler var ancak bunlar bazı insanları tatmin etmiyor tamamen istediği şekilde slider bulamayanlar oluyor bunun için kendi sliderinizi yapmanız için sizlere konuya giriş yaptım. Sadece birkaç kod ile jquery slider yapımı konusunda kafanızda mantığı az çok oturacaktır.
Kodları indirmek için tıkla

Kodları görüntülemek için tıkla

 

Kullandığımız kodlar

//jquery kodları

$(document).ready(function() {

	$(".kucuk").mouseover(function(){
		var src = $(this).attr("src");
		$("#buyuk").attr('src',src);
	})

});

//html kodları

	<img id="buyuk" alt="" src="1.png" width="610" />

	<img class="kucuk" alt="" src="1.png" width="150" />
	<img class="kucuk" alt="" src="2.png" width="150" />
	<img class="kucuk" alt="" src="3.png" width="150" />
	<img class="kucuk" alt="" src="4.png" width="150" />

29 Temmuz 2015 Saat : 6:06
admin
devamını oku

jquery derslerine giriş – hareketli div

Daha önceki derslerimde html ve css dersleri üzerinde durmuştum ancak bugün özel istek geldiği için jquery derslerine giriş yapmak istedim.

Bu dersimizde jquery’nin animate özelliğini kullanarak hareketli div ler nasıl yapılır onu göstereceğim. bunu kullanarak jquery hareketli resim gibi hareket gerektiren işlemleri yapabilirsiniz.

Video da oluşturduğum hareketli menü kodları‘nın tamamını buraya tıklayarak indirebilirsiniz.

18 Temmuz 2015 Saat : 9:44
admin
devamını oku

Html & Css dersleri 8 – css ile açılır kutu div

Merhaba arkadaşlar, bugün ki dersimize Css ile devam edeceğiz. Html derslerinin mantığını az çok kaptığınızı düşünüyorum bu yüzden Css dersleri ile devam etmeyi uygun buldum.

Bu derste css ile açılır menü (div) nasıl yapılır onu göstereceğim ayrıca css’de class yapısı da daha iyi oturmuş olur kafanızda. Lafı fazla uzatmadan “css açılır kapanır div” videomuza geçelim.

Kodların Browserde Görüntüsüne Bakmak İçin Tıklayın

17 Haziran 2015 Saat : 11:45
admin
devamını oku

Html dersleri 7 – Css ile menu yapımı

Merhaba Arkadaşlar, bugün ki konumuz html tasarıma renk katan ve birçok ekstra özellik getiren css kodlarıdır. Daha önceki html derslerinde yaptığımız web site örneğini şimdi css kodlarını kullanarak kolaylaştırıp css ile menü yapıcaz.

Çok yararlı olacağını düşündüğüm için video olarak yapmaya karar verdim umarım başından beri dersleri takip edenlere epey faydası olacaktır.

 

Kodların browserde görünümü için tıklayın

15 Mart 2015 Saat : 11:06
admin
devamını oku

html kodlarını çalıştırma

Merhabalar, html dersleri konularıma gelen yorumlardan gördüğüm kadarıyla ufak bir sıkıntıyı atlamışım. html kodları nasıl kullanılır konusunda bir video dersi hazırladım bu video sayesinde html kodu çalıştırma işlemi yapabilirsiniz.

İyi seyirler.

9 Mart 2015 Saat : 2:03
admin
devamını oku

html dersleri 6 – örnek html site yapımı

Selamun Aleyküm, bugün önceki 5 html dersinden neler öğrendik bu “html kodları” ile neler yapabiliriz bir bakalım. Html konularımı açmadan evvel bir web sitesi yapmak için gerekenleri anlatan konumuza buraya tıklayarak ulaşabilirsiniz.

Yayınladığım 5 html dersi ile basit yani güncelleme özelliği olmayan ve sade bir web sitesi yapabilecek kadar bilgiye ulaştığınızı düşünüyorum ve bugün bu bilgiler ile bir web sitesinin anasayfasını birlikte yapacağız.


<html>
<head>
<title>Html Dersleri 6</title>
</head>
<body bgcolor="888888">

<table width="900" height="40" bgcolor="444444" align="center">
<tr>

<td align="center">
<font color="ffffff">
Ana sayfa
</font>
</td>

<td align="center">
<font color="ffffff">
Hakkımızda
</font>
</td>

<td align="center">
<font color="ffffff">
Referanslarımız
</font>
</td>

<td align="center">
<font color="ffffff">
İletişim
</font>
</td>

<td align="right">
<input type="text"> <input type="submit" value="Ara">
</td>

</tr>
</table>

<table width="900" align="center">
<tr>

<td>
<img src="resim.jpg" width="900" height="300">
</td>

</tr>
</table>

<table width="900" align="center" bgcolor="ffffff">
<tr>

<td width="640" border="0">
<font color="000000" size="4">
<center>Yazı Başlığı</center>
</font>
<br>
<font color="444444" size="2">
<img src="resim.jpg" width="245" align="left">
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik İçerik
</td>

<td width="2">
</td>
<td width="1" bgcolor="999999">
</td>
<td width="2">
</td>

<td width="250">
<font color="000000" size="4">
<center><b>Duyurular</b></center>
<hr>
</font>
<br>
<b>Duyuru Başlığı</b><br>
Duyuru hakkında içerik bilgisi. Duyuru hakkında içerik bilgisi.
<hr>

<b>Duyuru Başlığı</b><br>
Duyuru hakkında içerik bilgisi. Duyuru hakkında içerik bilgisi.

<hr>
<b>Duyuru Başlığı</b><br>
Duyuru hakkında içerik bilgisi. Duyuru hakkında içerik bilgisi.


<hr>
<b>Duyuru Başlığı</b><br>
Duyuru hakkında içerik bilgisi. Duyuru hakkında içerik bilgisi.

<hr>
<b>Duyuru Başlığı</b><br>
Duyuru hakkında içerik bilgisi. Duyuru hakkında içerik bilgisi.

</td>

</tr>
</table>

<table width="500" height="30" align="center">
<tr>

<td align="center">
Örnek Şirket 2015 |  Sitenin Tüm Hakları Saklıdır.
</td>

</tr>
</table>

</body>
</html>

Görüldüğü üzere sadece html kodları kullanarak bir html index yapımını gerçekleştirdik.

kodların browser de nasıl durduğunu görmek için tıklayınız

7 Mart 2015 Saat : 11:46
admin
devamını oku

html dersleri 5 – facebook header yapımı

Merhabalar, bu dersimizde önceki derslerde gördüğümüz html bilgilerimizden facebook giriş sayfasının header (üst) kısmını nasıl yapabileceğimizi göstereceğim. bu ders için extra bir kod kullanmadım bu derse kadar öğrendiğimiz kodlar ile neler yapılabileceğine bir örnek olacak bu çalışmamız.


<html>
<head>
<title>Html Dersleri 5</title>
</head>
<body>

<table align="center" width="100%" height="88" bgcolor="#3b5998">
<tr>

<td align="left">
<img src="logo.png">
</td>

<td align="right" width="160">
<p align="left">
<font color="#ffffff" size="2">
E-posta veya Telefon<br>
</font>
<input type="text"><br>
<font color="#9DACCB" size="1">
<input type="checkbox"> Oturumumu sürekli açık tut
</font>
</p>
</td>

<td align="right" width="160">
<p align="left">
<font color="#ffffff" size="2">
Şifre<br>
</font>
<input type="password"><br>
<font color="#9DACCB" size="1">
Şifreni mi unuttun?
</font>
</p>
</td>

<td align="right" width="100">
<p align="left">
<br>
<input type="submit" value="Giriş Yap">
</p>
</td>

</tr>
</table>

</body>
</html>

Kodların Browserde Nasıl Görüntüğüne Bakmak İçin Tıklayın

takıldığınız yerleri yorum bölümünden sorabilirsiniz.

24 Şubat 2015 Saat : 11:23
admin
devamını oku
jquery kodları Son Yazılar