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
bosluk

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
bosluk

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
bosluk

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
bosluk

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
bosluk

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
bosluk

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
bosluk

html ile web site yapımı 3

Html Site Kodları ile web site yapımı konumuza devam ediyoruz

Bir önceki yazımıza html site yapımı 2  isimli konuya bakabilirsiniz.

Bu konumuzda direk kodları vericem fazla açıklama yapmadan sizlerde kullanabilirsiniz biraz kurcalayarak tabi önceki yazılarımı okumayı unutmayın.

<p></p>   = Paragraf tagı ( istediğiniz tagları bir arada tutmaya yarar )

<lu></lu> = Maddeleştirme

<li></li>  = listeleme

<a></a>   = Link Vermeye Yarar

<center>   = Hizalamayı Ortalar

align=”left”     = Hizalamayı Sol yapar

align=”right”  = Hizalamayı sağ yapar

<img/>  = Resim eklemenize yarar

<br/>     = Alt Satıra Geçirir

<hr>       = Yatay çizgi çekmek

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

<center><b>Html Site Yapımı 3 | Kodların Browser'den Görünümü</b></center>
<p align="left">
Evet Arkadaşlar Html Site Yapımı 3 konumuzun örnek kodlarının browserde
(site üzerinde) görünümünü buradan görüyoruz.<br/> Konuda Verdiğim kodları
bu dosyada kullanıyorum.Html öğrenmek istiyorsanız yapacaklarınız
<ul>
<li>1.) Sabırlı ve azimli olmalısınız.</li>
<li>2.) Kendi kendinize örnekler yaparak pratikte geliştirin</li>
<li>3.) Derslerimi Takip Edin icon smile html ile web site yapımı 3  </li>
</ul>
<hr/>
Dersleri takip etmek için
<a href="http://www.esatalyamac.com.tr/html-ile-web-site-yapimi-3/">Html Dersleri</a>
yazan yere tıklayın. Gördüğünüz gibi link verme işinide hallettik.
Şimdi resim ekleyelim.<br/> <img src="resimadi.jpg"/> Resimde Tamamdır Şimdide
Sağ Alta İmza Atarak Bitiriyorum. Birkaç satır aşşağı indirelim
</p>
<br/><br/><br/><p align="right"><b>Esat Alyamaç</b></p>

</body>
</html>

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

28 Ekim 2013
bosluk

html ile web site yapımı 2

Bir önceki yazımızda html site yapımı hakkında bilgiler vermiştik bu yazımızda ise html site kodları na giriş yapıcaz ve temel kodları incelicez böylelikle html ile site yapımı hakkında bilginiz olmuş olacak. Fazla uzatmadan kodlara geçiyorum önceki yazımızı okumayanlar mutlaka okusunlar aynı şeyleri anlatmadan direk açıklamaya geçiyorum.

Şuan için sizin kullanabileceğiniz işinize yarayacak  fonksiyonları kullanmayı göstericem. Peki nedir bunlar ?

( <title>,<b>,<i>,<u>,<font> ) fonksiyonlarıyla basit bir sayfa hazırlicaz.

html site yapımı 1. yazımızdada belirttiğimiz ana şablonu oluşturalım.

<html>
<head></head>
<body></body>
</html>

<title> = sayfanın başlığını bu özellik ile belirteceğimiz
için yani bunun sayfa içeriğiyle ilgisi olmaması nedeniyle bunu <head>
tagı içerisine yazmamız gerekiyor. diğerleri ise sayfa içeriği yani
sitede gözükecek şeyler olduğundan <body> tagları içerisine gelecek.

<html>

<head>
<title>Buraya Sayfa Başlığını Yazıyoruz</title>
</head>

<body>
Buraya ise sayfa içerisinde görünmesini istediğimiz yazı geliyor
yani şuan yazdığım bu yazı site açıldığında gözükecektir.Önemli
yerleri kalın yazmak istiyorsak "b" fonksiyonunu kullanmamız
gerekecek.
<b>Bu tagın içine yazığım herşey kalın olacaktır</b> tagı
kapattım artık normale döndü.

<i>şimdide italik oldu</i> ve tag kapandığı için düzeldi.

Şimdi ise hem kalın hemde italik yapmayı deneyelim
<b><i>işte oldu. ilk yazımızdada belirttiğimiz gibi en
son açılan tag en önce kapanır bizde bu özelliği öyle kapatıcaz 
önce italik sonra kalındır tagı kapatılması gerekir.</i></b> 
evet sorunsuz düzeldi.

<font color="ff0000"> Yazı rengini kırmızı yaptık buradaki 
kırmızı renk kodundan gelmektedir yani ff0000 değilde 000000 
yapsaydık yazı siyah ffffff yapsaydık yazı beyaz olurdu.şimdi 
kırmızı fonksiyonunu kapatana dek kırmızı yazmaya devam 
edecektir.eğer en başa bu fonksiyonu yazsak ve en son kapatsak 
tüm yazılar kırmızı olurdu
</font>

kapatma fonksiyonu ile yazı normale döndü.
</body>

</html>

evet gördüğünüz gibi fonksiyonlar başlangıç tagının sadece
önüne / işareti konmuş haliyle kapatılıyor bu şekilde kafanıza
göre örnek şeyleri html ile kodlayarak daha iyi kavrayabilirsiniz mantığını.

Dosyanın tarayıcıdaki halini görmek için Tıklayın

Bir sonraki yazımda html kodları ile yapılmış daha gelişmiş bir
örneği direkt olarak paylaşıcam artık birşeyleri kavradığınızı
düşünüyorum kendiniz kurcalayarak anlarsınız.

21 Ekim 2013
bosluk

html ile web site yapımı 1

Daha önceki yazımızda html site yapımı konusunda bilgiler vermiştik o yazımıza buraya tıklayarak ulaşabilirsiniz.
Bu yazımızda ise html kodlarıyla site yapımı hakkında bilgi vericem.

Her yazılımda başlangıç ve bitiş fonksiyonları vardır buradaki amaç tarayıcılara bu sayfayı hangi dille okuyacağını belirtmektir.

html in başlangıç ve bitiş tagları şu şekildedir.

<html> </html>

Gördüğünüz üzere / işareti html de bitirmek anlamına gelir ve html de hemen hemen her fonksiyon bu işaretle bitirilir. Şimdi sizlerle html in kemik yapısını yani ana şablonunu oluşturalım.

<html>
<head></head>
<body></body>
</html>

Evet tüm web siteleri bu ana şablon üzerine kuruludur dikkat ederseniz en son açılan tag en önce bitirilir.

Peki head ve body ne işe yarıyor ?

<head> </head> tagları arasına genellikle dosya dışından siteye entegre edeceğimiz stil ve js dosyaları için kullanılır ve site başlığı gibi ayarlar bu kısımdan verilir. Bu alana site içeriği girilmez

<body> </body> tagları ise site içerisinde görünmesini istediğiniz herşeyin kodlarını yani site içeriğini buradan belirlersiniz.

Bir sonraki yazımda html ile web site yapımı kodları hakkında örnekler vererek açıklıcam.Örnek web sitesi kodları yazarak html’in mantığını kavramanıza yardımcı olacak olan Html Site Kodları Yazımızı Okuyun

20 Ekim 2013
bosluk
jquery kodları Son Yazılar