1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

1-) Giriş Seviyesi - Web Tasarım

'Html - CSS - XML - JavaScript - Ajax' forumunda Lesyoner tarafından 24 Ekim 2020 tarihinde açılan konu

  1. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    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.

    [​IMG]

    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.

    [​IMG]



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

    [​IMG]

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

    [​IMG]

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

    Bir sonraki Konumuz Butonlar olacaktır bu konunun altından devam edilecek.
     
  2. Orion-Pax Guest

    • Guest
    Katılım:
    10 Mayıs 2018
    Mesaj:
    1,951
    Alınan Beğeniler:
    5,764
    Meslek:
    Sosyal Medya Uzmanı

    Özel Mesaj
    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.
     
    Tarkat, acelya10, Katraf ve 2 kişi daha bunu beğendi.
  3. 1Allah1Vatan Atıldı

    • Guest
    Katılım:
    8 Eylül 2020
    Mesaj:
    319
    Alınan Beğeniler:
    370

    Özel Mesaj
    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.
     
  4. MVC--sudo Atıldı

    • Guest
    Katılım:
    5 Ekim 2020
    Mesaj:
    218
    Alınan Beğeniler:
    175

    Özel Mesaj
    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.
     
    Orion-Pax bunu beğendi.
  5. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    Sorunuzu tam anlayamadım özür dilerim detaylı açıklar mısın?
     
    MVC--sudo ve Orion-Pax bunu beğendi.
  6. MVC--sudo Atıldı

    • Guest
    Katılım:
    5 Ekim 2020
    Mesaj:
    218
    Alınan Beğeniler:
    175

    Özel Mesaj
    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.
     
    Orion-Pax bunu beğendi.
  7. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    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
     
    acelya10, MVC--sudo ve Orion-Pax bunu beğendi.
  8. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    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.

    [​IMG]

    [​IMG]

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

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

    Artık bootstrapı bu şekilde kullanabiliriz.
     
    Tarkat, acelya10, Katraf ve 2 kişi daha bunu beğendi.
  9. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    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...

    [​IMG]

    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>
    [​IMG]

    Butonumuza bakıyoruz

    [​IMG]

    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>
    [​IMG]

    [​IMG]

    Gördüğünüz gibi şık butonlarımız oldu..
     
    acelya10, MVC--sudo ve Orion-Pax bunu beğendi.
  10. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    Not: bir sonraki konumuz arka planlar olacaktır.
     
    acelya10, Katraf ve Orion-Pax bunu beğendi.
  11. MVC--sudo Atıldı

    • Guest
    Katılım:
    5 Ekim 2020
    Mesaj:
    218
    Alınan Beğeniler:
    175

    Özel Mesaj
    Teşekkürler devrem.
     
    Lesyoner ve Orion-Pax bunu beğendi.
  12. L4chin Guest

    • Guest
    Katılım:
    14 Ekim 2020
    Mesaj:
    32
    Alınan Beğeniler:
    20

    Özel Mesaj
    Teşekkürler devrem
     
    Orion-Pax, Lesyoner ve MVC--sudo bunu beğendi.
  13. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    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..

    [​IMG]
    [​IMG]

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

    [​IMG]

    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.

    [​IMG]
    [​IMG]

    İş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.

    [​IMG]

    [​IMG]

    Arka plan konumuz bu kadardır. Diğer konumuz İnputlar ( örneğin şifre giriş alanı ) olacak.
     
    acelya10, MVC--sudo, Katraf ve 2 kişi daha bunu beğendi.
  14. GhostFace58 Guest

    • Guest
    Katılım:
    13 Eylül 2020
    Mesaj:
    557
    Alınan Beğeniler:
    847

    Özel Mesaj
    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.
     
  15. Katraf Guest

    • Guest
    Katılım:
    7 Temmuz 2017
    Mesaj:
    371
    Alınan Beğeniler:
    900

    Özel Mesaj
    Ellerine sağlık uygulamaya hemen geçiyorum bende :) konuların devamını bekliyorum sabırsızlıkla
     
    acelya10, MVC--sudo, Lesyoner ve 1 kişi daha bunu beğendi.
  16. GhostFace58 Guest

    • Guest
    Katılım:
    13 Eylül 2020
    Mesaj:
    557
    Alınan Beğeniler:
    847

    Özel Mesaj
    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 ?
     
  17. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,870
    Meslek:
    Öğrenci.

    Özel Mesaj
    Onu bu konuda anlatamam çünkü konunun dışına çıkmış olurum onu farklı bir konuda anlatacağım
     
  18. ibrahimenter Guest

    • Guest
    Katılım:
    18 Ekim 2020
    Mesaj:
    410
    Alınan Beğeniler:
    621

    Özel Mesaj
    eline emegine sağlık devrem allah başarılarının devamını getirsin
     
    acelya10, MVC--sudo, Lesyoner ve 1 kişi daha bunu beğendi.
  19. L4chin Guest

    • Guest
    Katılım:
    14 Ekim 2020
    Mesaj:
    32
    Alınan Beğeniler:
    20

    Özel Mesaj
    devrem
    kendime ait yetkimi nasıl görebilirim?
     
    ibrahimenter bunu beğendi.
  20. ibrahimenter Guest

    • Guest
    Katılım:
    18 Ekim 2020
    Mesaj:
    410
    Alınan Beğeniler:
    621

    Özel Mesaj
    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
     
    Orion-Pax bunu beğendi.

Bu Sayfayı Paylaş