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 kullanımlarına örnek verdik.

 

 


<html>
<head>
<title>Ders - CSS Buton Yapımı Ve CSS İle Resmi Ovalleştirme</title>
<meta charset="utf-8">

<style>

.ovalyap1{
border-radius: 10%;
}

.ovalyap2{
border-radius: 50%;
}
</style>
</head>

<body>

<img src="https://unsplash.it/300/300/?random">
<img src="https://unsplash.it/300/300/?random">

</body> </html>

CSS Buton Yapımı

 

Burda kullanacağımız kodları tek tek açıklayacağım. Bir buton oluşturduktan sonra classımıza yazacağımız kodlar ve açıklamaları;

 

background-color:#44c767; –> Arka plan rengi
border:1px solid #18ab29;   –> 1px lik Sınır çizgisi belirleme ve renklendirme
cursor:pointer;               –> Üzerine gelince Mouse’nin imlecini değiştirme
color:#ffffff;                    –> Yazı rengi
font-family:Arial;           –> Yazı tipi
font-size:19px;                –> Yazı Boyutu
padding:20px 63px;      –> Div içerisine alan belirleme
text-decoration:none;   –> Yazının altı çizili çıkmasını engelleme

 

Buton classımıza hover (üzerine gelince yapılmasını istediğimiz komutları yazacağız) ve active (tıklanınca yapılmasını istediğimiz komutları yazacağız) özelliğini kullanarak extra güzel bir görüntü katacağız.

 

CSS kodlarımız

 


.buton {
background-color:#44c767;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:20px 63px;
text-decoration:none;
}
.buton:hover {
background-color:#5cbf2a;
}
.buton:active {
position:relative;
top:2px;
}

 

 

Html Kodumuz

<button>Kayıt</button>

 

Yaptığımız çalışmanın Web görüntüsüne erişmek için buraya tıklayın

 

 

9 Şubat 2019
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 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