1-) Giriş Seviyesi - Web Tasarım

Merhabalar Web Tasarım konularının eksikliğini hissettim ek iş olarak yaptığım Web Tasarım ile alakalı bilgilendirici konuları ara ara paylaşacağım ve konuların düzenli olması açısından Giriş Seviyesini bu konu altında toparlayacağım. Orta ve yüksek seviyeleri farklı konu altında toplayacağım.

Front End Developer - Back End Developer önce bunların ne anlama geldiğini açıklayalım..

Front End Developer

Google Tanımı : Ön uç web geliştirme, HTML, CSS ve JavaScript kullanarak verileri grafik bir arayüze dönüştürme uygulamasıdır.

Evet bir websitenin ön tasarımını geliştiren kişilere Front End Developer denir. Şimdi Back End Developer'a bakalım...

Back End Developer

Ön uç tasarımın tam tersi arka plandaki işleri kodlar buna örnek vermem gerekiyor örneğin bir websitede gezindiğimiz zaman form işlemlerini kayıt işlemlerini giriş işlemlerini yaparız işlem yapmak programlama dili gerektirir bunu bir tasarım dili ile yapamazsınız. PHP ASPX gibi diller ile bu işlemleri yaptırabilirsiniz.

Umarım açıklayıcı olmuştur.

Bootstrap ile hazır kodları kullanacağız Bootstrap nedir diye soracak olursanız google tanımı: tasarladığımız veya tasarlayacağımız web sitesini kolay bir şekilde “responsive” yani tablet, telefon, masaüstü bilgisayar ve her türlü ekran çözünürlüğüne duyarlı olarak ayarlamamıza yarayan ücretsiz ve açık kaynak kodlu frameworktür.

Bootstrap Kullanımı

Bootstap resmi sitesine gidiyoruz https://getbootstrap.com/ daha sonra sağ üst menüden Documentation alanına gidiyoruz.



Bu alanda Bootsrapı projemizde kullanabilmemiz için bir çok seçenek sunuyor JS ve CSS dosyalarını indirip projeye dahil edip çalıştırabiliriz fakat en kısa yol ve kullanışlı yol dosyaları uzaktan çağırmaktır.




Starter Template seçiyoruz ve kopyalıyoruz daha sonra metin editörümüzü açıyoruz yapıştırıyoruz.



Kaydediyoruz dosyamızı .html uzantısı ile ve web tarayıcımızda açıyoruz.



Bootstrap artık projemize dahil oldu ve kullanabileceğiz...

Bir sonraki Konumuz Butonlar olacaktır bu konunun altından devam edilecek.

 

elinize, emeğinize sağlık. çok güzel ve de faydalı, yararlı, anlaşılır bir konu anlatımı olmuş. böyle güzel konuların devamının gelmesi dileği ile inşALLAH. kolay gelsin diyor, iyi forumlar diliyorum. saygılar.

 

Devrem Eline Emeğine saglik
Cok Faydalı, Yararlı bir konu olmuş Devrem
Allah Hepimizin Yar ve Yardımcisi olsun devrem
Iyi Forumlar, iyi gunler diliyorum devrem
Saygılar.

 

Devrem eline sağlık.
Son fotoğraf aktif değil.
Başlangıç kısmındayken Web sitesi scriptlerinin klasör mantıklısı hakkımda da bilgilendirirseniz sevinirim.

 

Sorunuzu tam anlayamadım özür dilerim detaylı açıklar mısın?

 

Devrem fotoğrafı diyorsanız en son fotoğraftan bahsediyorum.

Rica ettiğim konu ise index.html , style.css, tema klasörü gibi.
Yani hazır bir Web sitesi script inde gördüğümüz klasör hiyerarşisinden bahsediyorum.

 

Eğer CSS ve JS dosyalarını uzaktan çağıracaksan klasör oluşturmaya ve bunları birbine bağlamaya gerek kalmaz Bootstrap hazır şablonu ile js ve CSS dosyalarını indirmeden kullanabiliyoruz ama örnek olması için akşam dediğin şekilde de yapıp göstereceğim

 

Merhabalar istek üzerine butonlar konusuna geçmeden önce CSS ve JS dosyalarını uzaktan çağırmadan klasör içinde nasıl çalıştırabiliriz bunlara değineceğim.

https://getbootstrap.com/ websitesine gidiyoruz

Sağ üstte Download yazısına tıklıyoruz.





Dosyalar indikten sonra ana klasörümüze gelerek RAR içerisindeki CSS ve JS klasörlerini ana klasöre atıyoruz



Daha sonra metin editörümüze geliyoruz...



Burada dikkat etmeniz gereken nokta şudur link olan yerleri işaret içine aldım onları sileceğiz çünkü amacımız dosyayı uzaktan çağırmak değil yerelde çalıştırmak onun için linkleri silip js dosyası ve css dosyası hangi klasörde ise onu yazacağız.



Artık bootstrapı bu şekilde kullanabiliriz.

 

Sıkça kullanacağımız Butonlar konusuna geçiyoruz. Bootstrap kullanmadan Butonlara CSS ile şekil vermek biraz zahmetli ve kod bilgisi gerektirebilir onun için bootstrap ile sadece bir class vererek güzel butonlar yapacağız.

Metin editörümüzü açıyoruz ve bir buton kodu yazıyoruz.

Kod:

<button>Lesyoner</button>

Bu tür bir buton çok basit kalacaktır hemen bakalım nasıl bir buton oluşturmuşuz...



Gördüğünüz gibi bu tür bir butonu kimse kullanmak istemez buna bir class vererek daha güzel hale getireceğiz..

Kod:

  <button class="btn btn-success">Lesyoner</button>

Butonumuza bakıyoruz



Gördüğünüz gibi buton gayet güzel bir şekilde tek bir class ile şekil aldı. Peki aklınıza şu soru gelecektir sadece yeşil renk mi yapabiliyoruz? Tabiki de hayır.. farklı renkler için aşağıya bıraktığım kodları kullanabilirsiniz.

Kod:

<button class="btn btn-success">Lesyoner</button>
<button class="btn btn-primary">Lesyoner</button>
<button class="btn btn-danger">Lesyoner</button>
<button class="btn btn-warning">Lesyoner</button>
<button class="btn btn-dark">Lesyoner</button>

Gördüğünüz gibi şık butonlarımız oldu..

 

Not: bir sonraki konumuz arka planlar olacaktır.

 

Teşekkürler devrem.

 

Teşekkürler devrem

 

Merhabalar konumuz Arka planlar. Arka plan renklerini bir class ile ayarlayacağız classa vereceğimiz değerler yine renk olarak "primary, secondary, success, danger, warning, dark" olacaktır. vereceğimiz class ise

Kod:

class="bg-dark"

olacaktır.

Başlayalım..




<body> Tagına class vererek arka planı koyu yaptık şimdi bg-primary değerini vererek arka planı mavi yapalım...



Arka plana renk değil resim koymak isteyebilirsiniz bu durumda CSS ile işimiz olacaktır.

Kod:

style="background-image: url();

Bu CSS kodumuzu body tagına vereceğiz.




İşlemimiz bu kadar değil arka plan gördüğünüz gibi tam sığmadı peki nasıl sığdıracağız?

<head>

</head>

Taglarının arasında <style> tagları açacağız ve içerisine

Kod:

body {
      background-image:url(bg.jpg);
      background-repeat:no-repeat;
      background-size: cover;
   }

ekleyeceğiz.





Arka plan konumuz bu kadardır. Diğer konumuz İnputlar ( örneğin şifre giriş alanı ) olacak.

 

Devrem allah razı olsun index kodlarken arka plan resmini sığdıramamıştım araştırdım ama anlamadım. Sonunda sayende anladım çok sağol.

 

Ellerine sağlık uygulamaya hemen geçiyorum bende konuların devamını bekliyorum sabırsızlıkla

 

Devrem senden rica etsem sonraki konularda hani ayyıldız tim indexi varya hareketli olan onun arkasındaki hareket eden dna gbi şeylerin nasıl yapıldığını anlatırmısın acaba ?

 

Onu bu konuda anlatamam çünkü konunun dışına çıkmış olurum onu farklı bir konuda anlatacağım

 

eline emegine sağlık devrem allah başarılarının devamını getirsin

 

devrem
kendime ait yetkimi nasıl görebilirim?

 

devrem yetkiler üst düzey yöneticiler tarafından verilir yeni geldiğin için senin şu anlık yetkin yok ama ilerde hak edersen verilir