CSS Buton Yapımı Ve CSS İle Resmi Ovalleştirme

Merhabalar, önceki html site yapımı konulu ders serisinde standart HTML ve CSS kodlarını kullanarak basit bir web sitesi yapmıştık. Bu dersimizde ise CSS bilgisini biraz daha ilerletmek amacıyla CSS Buton Yapımı nasıl olur ve siteye eklediğimiz fotoğrafların kenarlarını nasıl ovalleştirebileceğimizi göstereceğim. Bu konuları öğrendikten sonra ise bir sonraki dersimiz HTML Üye Kayıt Sayfası nasıl yapılır onu öğreneceğiz.   Resmi oval yapma ile başlayalım;   Komutumuz: border-radius: 10%; Stil satırları arasına ekleyeceğimiz bu komut ile yüzde değerini belirlediğimiz ölçüde resmin kenarlarını yuvarlayabiliyoruz. Şimdi bunu bir class’a atayarak örnek kodumuzu yazalım. ovalyap1 ve ovalyap2 adında 2 adet class oluşturarak %10 ve %50

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

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

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

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

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. [php] <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>

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. [php] <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?

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 [php] <html> <head> <title>Html Dersleri 4</title> </head> <body> <table align="center" width="800" height="40" background="menu.png"> <tr> <td> Ana sayfa

Devamını Oku

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 [php] <html> <head> <title>Html Dersleri 3</title> </head> <body> <center><b>Html Site

Devamını Oku

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. [sourcecode language=”plain”] <html> <head></head> <body></body> </html> [/sourcecode] <title> = sayfanın başlığını bu özellik ile belirteceğimiz için yani bunun sayfa içeriğiyle ilgisi olmaması nedeniyle bunu

Devamını Oku