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

html dersleri 4 – menü yapımı

Merhaba arkadaşlar, uzun süredir yeni yazı yazmamıştım ama yorumlar gelince  yeniden yazmaya başlamayı düşünüyorum. daha önceki html konularında bazı fonksiyonları göstermiştim ilk 3 dersi inceleyerek bunları görebilirsiniz 4. dersimizde ise örnek olarak html menü‘nün nasıl yapılacağını göstereceğim.

Yalnızca html kullanacağım için biraz basit olacak ancak bu yazı html dersi olduğu için html imkanlarını kullanacağız.

Notlar;
width   = Genişlik

height  = Yükseklik

background = Arka plan

<table>  = Tablo oluştur

<tr>         = Tabloda satır oluştur

<td>        = Tabloda sütun oluştur

<input>  = nesne oluştur


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

<table align="center" width="800" height="40" background="menu.png">
<tr>

<td>
Ana sayfa
</td>

<td>
Menu 2
</td>

<td>
Menu 3
</td>

<td>
İletişim
</td>

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

</tr>
</table>

</body>
</html>

Gördüğünüz üzere bir tablo oluşturup arkaplanına mavi tonlu bir png resmi atıp içerisinde sütunlar oluşturarak menu elemanlarını oluşturduk ve en son da ise bir arama nesnesi ile buton nesnesi oluşturup bu sütunu sağ tarafa kaydırdık böylelikle html menü örneğimizi tamamlamış olduk. bu menulere link vererek o menüye tıklandığında hangi sayfaya gitmesini istiyorsak oraya yönlendirme işlemini de yapabiliriz link örneğini önceki yazımda zaten göstermiştim.

Kodların Browserde Nasıl Görüntüğüne Bakmak İçin Tıklayın
İlgi gördüğü sürece yazılara devam etmeyi düşünüyorum takıldığınız yerleri yorum bölümünden sorabilirsiniz.

21 Şubat 2015 Saat : 4:20
admin
devamını oku
jquery kodları Son Yazılar