Web Yazılımı - Ders v1.2

Merhaba Dostlar;

Bugünkü dersimizde (v1.2) sizlerle kaldığımız yerden devam edeceğiz.

Neler Yapacağız?

Header Alanını Geliştireceğiz,

Ekrana Tanıtım Yazısı ve Buton Ekleyeceğiz,

Arka Plana Sesli Yapay Zeka Ekleyeceğiz.

İlk olarak Header alanını geliştirelim.

Birinci olarak kullanacağımız iconların ev sahibi olan "Font Awesome" dosyamıza çağırıyoruz.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Bu Kodu Sayfanızın <head> </head> etiketleri arasına yapıştırın.

Sonra

<i class="fa fa-home" style="font-size: 40px; color:rgba(41, 41, 41, 0.712);" id=
"home" title="Ana Sayfa"></i>
        <i class="fa fa-phone" style="font-size: 40px; color: rgba(41, 41, 41, 0.7
12);" id="phone" title="İletişim"></i>
        <i class="fa fa-address-card-o" style="font-size: 40px; color: rgba(41, 41
, 41, 0.712);" id="adress" title="Adres"></i>
        <i class="fa fa-cog" style="font-size: 40px; color: rgba(41, 41, 41, 0.71
2);" id="cog" title="Ayarlar"></i>
        <i class="fa fa-send-o" style="font-size: 40px; color: rgba(41, 41, 41, 0
.712);" id="send" title="Payaşım Yap"></i>
        <i class="fa fa-share-alt" style="font-size: 40px; color: rgba(41, 41, 41
, 0.712);" id="share" title="Paylaş"></i>
        <i class="fa fa-user" style="font-size: 40px; color: rgba(41, 41, 41, 0.7
12);" id="user" title="Kullanıcı Hesabı"></i>
        <i class="fa fa-video-camera" style="font-size: 40px; color: rgba(41, 41,
 41, 0.712);" id="camera" title="Kamera"></i>
        <i class="fa fa-warning" style="font-size: 40px; color: rgba(41, 41, 41, 
0.712);" id="warning" title="Sorun Bildir"></i>
        <i class="fa fa-upload" style="font-size: 40px; color: rgba(41, 41, 41, 0
.712);" id="upload" title="Sayfayı Yükle"></i>
        <i class="fa fa-user-plus" style="font-size: 40px; color: rgba(41, 41, 41
, 0.712);" id="plus" title="Kullanıcı Ekle"></i>
        <i class="fa fa-shield" style="font-size: 40px; color: rgba(41, 41, 41, 0
.712);" id="shi" title="Güvenlik"></i>
        <i class="fa fa-refresh" style="font-size: 40px; color: rgba(41, 41, 41, 
0.712);" id="ref" title="Yenile" onclick="newRef()"></i>
        <i class="fa fa-plus-square-o" style="font-size: 40px; color: rgba(41, 41
, 41, 0.712);" id="plusSq" title="Proje Oluştur"></i>
        <i class="fa fa-music" style="font-size: 40px; color: rgba(41, 41, 41, 0.
712);" id="music2" title="Müzik"></i>
        <i class="fa fa-sign-out" style="font-size: 40px; color: rgba(41, 41, 41,
 0.712);" id="sign" title="Giriş Yap"></i>

Bu Kodları Kopyalayıp <div class="header"> Buraya Kopaylayın </div>

Bu Aşamada Bittikten Sonra CSS Kodumuza Gelelim.

#home {
      position: absolute;
      left: 2%;
      top: 11%;
    }
    #phone {
      position: absolute;
      left: 8%;
      top: 10%;
    }
    #adress {
      position: absolute;
      left: 14%;
      top: 10%;
    }
    #cog {
      position: absolute;
      left: 20%;
      top: 10%;
    }
    #send {
      position: absolute;
      left: 26%;
      top: 10%;
    }
    #share {
      position: absolute;
      left: 32%;
      top: 10%;
    }
    #user {
      position: absolute;
      left: 38%;
      top: 10%;
    }
    #camera {
      position: absolute;
      left: 44%;
      top: 10%;
    }
    #warning {
      position: absolute;
      left: 50%;
      top: 10%;
    }
    #upload {
      position: absolute;
      left: 56%;
      top: 10%;
    }
    #plus {
      position: absolute;
      left: 62%;
      top: 10%;
    }
    #shi {
      position: absolute;
      left: 68%;
      top: 10%;
    }
    #ref {
      position: absolute;
      left: 74%;
      top: 10%;
    }
    #plusSq {
      position: absolute;
      left: 80%;
      top: 10%;
    }
    #music2 {
      position: absolute;
      left: 86%;
      top: 10%;
    }
    #sign {
      position: absolute;
      left: 92%;
      top: 10%;
    }

Bu Kodlarımızıda Kopyalayıp CSS Alanında Boş Bir yere Yapıştırın.

Sonrasında İconlar biraz dağınık durduğu için yine CSS alanındaki önceden yazmış olduğumuz .header içinde height satırında height: 60px yazıyor olması lazım onu height: 50px yapın ve herşey düzelmiş olacaktır.

ve Artık Header alanını Geliştirme Aşaması Bitmiştir şimdi Ekrana bir yazı yazalım.

<h1 id="text">Merhaba Dünya!</h1>

<h3 id="text2">Mossarb.net ile bir Yazılımcı Olabilirsiniz.</h3>

Bu Kodu </div> olduğu yerin altına kopyalayın.

h1 en büyük yazı boyutudur ama bunu CSS ile daha büyükte yapabiliriz.

id kodu ile ona bir ID vermiş olduk ve sadece ona özel düzenleme yapabileceğiz.

Hemen CSS Kodlarımıza Geçelim.

#text {
        color: #fff;
        font-size: 90px;
        font-family: 'Lobster', sans-serif;
        position: absolute;
        right: 120px;
        top: 5px;
    }

Bu Kod id="text" olan yazıya yani Merhaba Dünya! yazan koda aittir.

color ile rengini beyaz yaptık.

font-size ile boyutunu 90px yaptık.

font-family ile yazı yazı tipini değiştirdik ve bunun için google font family kodunu çağırmamız gerekiyor bunun içinde

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Bu Kodu Sayfanızın <head> </head> kodları arasına yapıştırın.

Daha Sonra

#text2 {
        color: #fff;
        font-size: 30px;
        font-family: 'Lobster', sans-serif;
        position: absolute;
        right:150px;
        top:150px;
    }

Bu Kod Yukarıdaki Kod ile Aynıdır sadece yazı boyutu ve yeri değişmiştir Bu Kod ise id="text2" yazısına aittir.

Şimdi ise Ekrana bir Buton Koyalım ve Düzenleyelim.

<button id="btn" onclick="btnFunc()">Daha Fazla</button>

Bu Kodu En Son Yazdığımız h3 id="text2" kodunun altına kopyalayın.

Şimdi ise butonumuzun yerini, şeklini ve rengini belirleyelim.

CSS Kodları

#btn {
     background-color: rgb(93, 32, 206);
     color: #fff;
     border: none;
     border-radius: 5px;
     width: 200px;
     height: 40px;
     font-size: 15px;
     outline: 0;
     transition: all 1s;
     text-align: center;
     position: absolute;
     right: 300px;
     top: 260px;
    }

Bu Kodlar Sayesinde Butonumuza Renk, Boyut ve Şekil geldi ama şimdi birde butona tıklandığında ve mouse üzerine geldiğinde buton hareket etsin istiyorsak bu kodları kullanalım,

#btn:hover {
        width: 180px;
        height: 35px;
        font-size: 13px;
    }

Buton Ekleme işi bitti ve şimdi sırada Arka plana Sesli Yapay Zeka Ekleme ve Butona Tıklandığında Yapay Zekayı Konuşturma var.

Hemen ilk olarak kullanacağımız yeri import yani dosyamıza çağıralım.

<script src="http://code.responsivevoice.org/responsivevoice.js"></script>

Bu Kodu Sayfanızın Herhangi bir yerine veya <head> </head> kodlarının arasına yapıştırın.

Yapay Zeka işleminde html kodu yok sadece javascript kodu olduğundan dolayı javascript ile yazmamız gerekiyor ve javascript yazmak için,

<script>
        
    </script>

Bu Kodu Css Kodunun bittiği yere yani </style> kodunun altına kopyalayın.

ve <script> yazan yerin hemen altına şu kodları yazın,

function btnFunc() {
            responsiveVoice.speak("Daha Fazla Bilgi Edinmek için Mossarb nokta ne
t websitesini ziyaret ediniz.", "Turkish Male");
        }

Bu Kod Butona Tıklandığı Anda Çalışacaktır.

Şimdi Sayfaya Girdiğiniz Anda Size Hoşgeldin (İsminiz) Diyecek bir kod yazalım

Şimdi Tekrar Javascript koduna gelelim ve oraya şunu yazalım,

var isim = prompt("Lütfen adınızı giriniz.");
   
   if( (isim != "") && (isim != null) ) 
   
   responsiveVoice.speak("Hoşgeldin " + isim + "!", "Turkish Male");
      
   else if(isim == "") 
   
   responsiveVoice.speak("Lütfen Gerekli Alanı Boş Bırakmayın.", "Turkish Male");
   
   else if(isim == null) 
  
   responsiveVoice.speak("İsim Vermekten Vazgeçtiniz", "Turkish Male");

Kodlarımız Bu Kadar.

Tüm Kodlar:

<!DOCTYPE html>
<html lang="tr">
<head>
    <script src="http://code.responsivevoice.org/responsivevoice.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mossarb - Demo</title>
</head>
<body onload="giris()">
    <div class="header">
        <i class="fa fa-home" style="font-size: 40px; color:rgba(41, 41, 41, 0.712);" id="home" title="Ana Sayfa"></i>
        <i class="fa fa-phone" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="phone" title="İletişim"></i>
        <i class="fa fa-address-card-o" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="adress" title="Adres"></i>
        <i class="fa fa-cog" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="cog" title="Ayarlar"></i>
        <i class="fa fa-send-o" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="send" title="Payaşım Yap"></i>
        <i class="fa fa-share-alt" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="share" title="Paylaş"></i>
        <i class="fa fa-user" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="user" title="Kullanıcı Hesabı"></i>
        <i class="fa fa-video-camera" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="camera" title="Kamera"></i>
        <i class="fa fa-warning" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="warning" title="Sorun Bildir"></i>
        <i class="fa fa-upload" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="upload" title="Sayfayı Yükle"></i>
        <i class="fa fa-user-plus" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="plus" title="Kullanıcı Ekle"></i>
        <i class="fa fa-shield" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="shi" title="Güvenlik"></i>
        <i class="fa fa-refresh" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="ref" title="Yenile" onclick="newRef()"></i>
        <i class="fa fa-plus-square-o" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="plusSq" title="Proje Oluştur"></i>
        <i class="fa fa-music" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="music2" title="Müzik"></i>
        <i class="fa fa-sign-out" style="font-size: 40px; color: rgba(41, 41, 41, 0.712);" id="sign" title="Giriş Yap"></i>
    </div>

    <h1 id="text">Merhaba Dünya!</h1>
    <h3 id="text2">Mossarb.net ile bir Yazılımcı Olabilirsiniz.</h3>

    <button id="btn" onclick="btnFunc()">Daha Fazla</button>
    <style>
        body {
            background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEjREwodImHzzb_YGFzgAw8_JV-O2QThYnLPdrJ15EAelOn6ippdWVyy3-kb32Zx75Cf8C2bVubykg9mlCA-h5o_vZDufAuiooEZ8uamELTeofqlSa_KlpXDSXHxe5oclO2alfy2tcC1zlRb10FcrhnliwXCIy9epk6AZhHFx3NY-o8l2DZGGKPm4TOD=s16000');
            background-repeat: no-repeat;
            background-size: cover;
        }
        .header {
            background-color: rgb(224, 224, 224);
            background-color: rgba(224, 224, 224, 0.226);
            color: black;
            backdrop-filter: blur(40px);
            border: none;
            border-radius: 20px;
            position: absolute;
            bottom: 5px;
            left: 7px;
            width: 1350px;
            height: 50px;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        #home {
      position: absolute;
      left: 2%;
      top: 11%;
    }
    #phone {
      position: absolute;
      left: 8%;
      top: 10%;
    }
    #adress {
      position: absolute;
      left: 14%;
      top: 10%;
    }
    #cog {
      position: absolute;
      left: 20%;
      top: 10%;
    }
    #send {
      position: absolute;
      left: 26%;
      top: 10%;
    }
    #share {
      position: absolute;
      left: 32%;
      top: 10%;
    }
    #user {
      position: absolute;
      left: 38%;
      top: 10%;
    }
    #camera {
      position: absolute;
      left: 44%;
      top: 10%;
    }
    #warning {
      position: absolute;
      left: 50%;
      top: 10%;
    }
    #upload {
      position: absolute;
      left: 56%;
      top: 10%;
    }
    #plus {
      position: absolute;
      left: 62%;
      top: 10%;
    }
    #shi {
      position: absolute;
      left: 68%;
      top: 10%;
    }
    #ref {
      position: absolute;
      left: 74%;
      top: 10%;
    }
    #plusSq {
      position: absolute;
      left: 80%;
      top: 10%;
    }
    #music2 {
      position: absolute;
      left: 86%;
      top: 10%;
    }
    #sign {
      position: absolute;
      left: 92%;
      top: 10%;
    }
    #text {
        color: #fff;
        font-size: 90px;
        font-family: 'Lobster', sans-serif;
        position: absolute;
        right: 120px;
        top: 5px;
    }
    #text2 {
        color: #fff;
        font-size: 30px;
        font-family: 'Lobster', sans-serif;
        position: absolute;
        right:150px;
        top:150px;
    }
    #btn {
     background-color: rgb(93, 32, 206);
     color: #fff;
     border: none;
     border-radius: 5px;
     width: 200px;
     height: 40px;
     font-size: 15px;
     outline: 0;
     transition: all 1s;
     text-align: center;
     position: absolute;
     right: 300px;
     top: 260px;
    }
    #btn:hover {
        width: 180px;
        height: 35px;
        font-size: 13px;
    }
    </style>
    <script>
       var isim = prompt("Lütfen adınızı giriniz.");
   
   if( (isim != "") && (isim != null) ) 
   
   responsiveVoice.speak("Hoşgeldin " + isim + "!", "Turkish Male");
      
   else if(isim == "") 
   
   responsiveVoice.speak("Lütfen Gerekli Alanı Boş Bırakmayın.", "Turkish Male");
   
   else if(isim == null) 
  
   responsiveVoice.speak("İsim Vermekten Vazgeçtiniz", "Turkish Male");
        function btnFunc() {
            responsiveVoice.speak("Daha Fazla Bilgi Edinmek için Mossarb nokta net websitesini ziyaret ediniz.", "Turkish Male");
        }
    </script>
</body>
</html>

Sonuç Olarak Bir Ekran Görüntüsü;

2. Ders Bitti

3. Derse Git

Facebook

Web Yazılımı - Ders v1.2 - Mossarb

Yorum Gönder

0 Yorumlar

İletişim

Abone Ol

Facebook

Abone Ol

Popüler

Python ile Yüzlerce Mesaj Kopyalamak - Mossarb

Dünya'dan ve Yurttan İlginç Bilgiler - Mossarb

İletişim - Mossarb

Yeni Yayınlar

Dünya'dan ve Yurttan İlginç Bilgiler - Mossarb

Yeni Köpek Alacağım, Ne Almalıyım ? - Mossarb

Python ile Yüzlerce Mesaj Kopyalamak - Mossarb

Facebook

Web Yazılımı - Ders v1.2 - Mossarb

Yorum Gönder

0 Yorumlar

İletişim

Abone Ol

Sosyal Medya

Facebook

Abone Ol

Popüler

Python ile Yüzlerce Mesaj Kopyalamak - Mossarb

Dünya'dan ve Yurttan İlginç Bilgiler - Mossarb

İletişim - Mossarb

Yeni Yayınlar

Dünya'dan ve Yurttan İlginç Bilgiler - Mossarb

Yeni Köpek Alacağım, Ne Almalıyım ? - Mossarb

Python ile Yüzlerce Mesaj Kopyalamak - Mossarb